如何检测元素外部的点击？

javascript jquery click

2022-08-29 21:49:05

我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。我想在用户单击菜单区域外时隐藏这些元素。

jQuery可以实现这样的事情吗？

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

答案 1

注意：应该避免使用，因为它会破坏 DOM 中的正常事件流。有关详细信息，请参阅此 CSS 技巧文章。请考虑改用此方法。stopPropagation

将单击事件附加到关闭窗口的文档正文。将单独的单击事件附加到容器，该事件将停止传播到文档正文。

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

答案 2

您可以使用 .closest（） 侦听上的单击事件，然后确保不是单击元素的祖先或目标。document#menucontainer

如果不是，则单击的元素位于外部，您可以安全地将其隐藏。#menucontainer

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

编辑 – 2017-06-23

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

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的评论，只是使用而不是jQuery部分。!element.contains(event.target)

但现在也可以在所有主流浏览器中使用（W3C版本与jQuery版本略有不同）。Polyfills可以在这里找到：Element.closest（）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()
        }
    }