如何检测元素外的单击事件？

Question

如何检测元素外的单击事件？

2925

我有一些HTML菜单，当用户点击这些菜单的标题时，会完全显示它们。当用户在菜单区域外点击时，我希望隐藏这些元素。

使用jQuery是否可以实现这样的效果？

$("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});

- Sergio del Amo

51

这是该策略的一个示例：http://jsfiddle.net/tedp/aL7Xe/1/ - Ted

22

正如Tom所提到的，您需要在使用此方法之前阅读http://css-tricks.com/dangers-stopping-event-propagation/。那个jsfiddle工具非常酷。 - Jon Coombs

3

获取元素的引用，然后使用 event.target，最后对它们进行 != 或 == 的比较，根据比较结果执行相应的代码。 - Rohit Kumar

尝试使用 event.path。https://dev59.com/XnVC5IYBdhLWcg3w4Vf6#43405204 - Dan Philip Bejoy

9

使用event.target实现的原生JavaScript解决方案，不包含event.stopPropagation。 - lowtechsun

显示剩余2条评论

91个回答

1616

你可以在 document 上监听一个 click 事件，然后使用 .closest() 确保被点击的元素不是 #menucontainer 的祖先或目标。

如果不是，则被点击的元素位于 #menucontainer 外部，你可以安全地隐藏它。

$(document).click(function(event) { 
  var $target = $(event.target);
  if(!$target.closest('#menucontainer').length && 
  $('#menucontainer').is(":visible")) {
    $('#menucontainer').hide();
  }        
});

Edit – 2017-06-23

如果您计划关闭菜单并停止监听事件，您还可以在事件监听器后进行清理。该函数仅清理新创建的监听器，保留document上任何其他点击监听器。使用 ES2015 语法：

export function hideOnClickOutside(selector) {
  const outsideClickListener = (event) => {
    const $target = $(event.target);
    if (!$target.closest(selector).length && $(selector).is(':visible')) {
        $(selector).hide();
        removeClickListener();
    }
  }

  const removeClickListener = () => {
    document.removeEventListener('click', outsideClickListener);
  }

  document.addEventListener('click', outsideClickListener);
}

编辑 - 2018-03-11

对于那些不想使用jQuery的人，这里是上面代码使用纯vanillaJS（ECMAScript6）的版本。

function hideOnClickOutside(element) {
    const outsideClickListener = event => {
        if (!element.contains(event.target) && isVisible(element)) { // or use: event.target.closest(selector) === null
          element.style.display = 'none';
          removeClickListener();
        }
    }

    const removeClickListener = () => {
        document.removeEventListener('click', outsideClickListener);
    }

    document.addEventListener('click', outsideClickListener);
}

const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ); // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js

注意: 这是基于Alex的评论而建议使用!element.contains(event.target)，而不是jQuery部分。

但是，在所有主要浏览器中现在也可以使用element.closest()（W3C版本与jQuery有些不同）。可以在此处找到Polyfills: Element.closest()

编辑-2020年05月21日

如果您希望用户能够在元素内单击并拖动鼠标，然后将其释放到元素外而不关闭该元素：

      ...
      let lastMouseDownX = 0;
      let lastMouseDownY = 0;
      let lastMouseDownWasOutside = false;

      const mouseDownListener = (event: MouseEvent) => {
        lastMouseDownX = event.offsetX;
        lastMouseDownY = event.offsetY;
        lastMouseDownWasOutside = !$(event.target).closest(element).length;
      }
      document.addEventListener('mousedown', mouseDownListener);

在outsideClickListener中：

const outsideClickListener = event => {
        const deltaX = event.offsetX - lastMouseDownX;
        const deltaY = event.offsetY - lastMouseDownY;
        const distSq = (deltaX * deltaX) + (deltaY * deltaY);
        const isDrag = distSq > 3;
        const isDragException = isDrag && !lastMouseDownWasOutside;

        if (!element.contains(event.target) && isVisible(element) && !isDragException) { // or use: event.target.closest(selector) === null
          element.style.display = 'none';
          removeClickListener();
          document.removeEventListener('mousedown', mouseDownListener); // Or add this line to removeClickListener()
        }
    }

- Art

34

我尝试了很多其他答案，但只有这个起作用了。谢谢。我最终使用的代码是：$(document).click( function(event) { if( $(event.target).closest('.window').length == 0 ) { $('.window').fadeOut('fast'); } } ); - Pistos

42

我最终选择了这个解决方案，因为它更好地支持同一页上的多个菜单，而在第一个菜单打开时点击第二个菜单将使第一个菜单保持打开状态，这是在stopPropagation方案中不具备的。 - umassthrower

15

优秀的回答。当您有多个想要关闭的项目时，这是正确的做法。 - John

32

使用Node.contains()替代!element.contains(event.target)实现无需jQuery。 - Alex Ross