检测点击是否不是某些特定的 div答案

【问题标题】：Detecting if click is not some specific divs检测点击是否不是某些特定的 div
【发布时间】：2011-11-26 18:53:22
【问题描述】：

我正在开发一种水平菜单，但在单击时可见并在单击时隐藏，但在单击某些箭头时可见，而当单击文档而不是某些 div 容器时隐藏。在那个 div 容器中还有一些其他元素。如果我们写document.onclick=closingfunction，那么无论用户是否点击该div本身，它都会关闭。当用户点击任何地方但不是在该 div 本身或箭头上时，我想调用 closefunction。

好像会有它的解决方案，但是我没有找到，所以在这里发布它。

【问题讨论】：

标签： javascript jquery mouseevent dom-events unobtrusive-javascript

【解决方案1】：

你可以使用jQuery的closest()来查看点击是否在菜单内： http://api.jquery.com/closest/

$('body').click(function(e){
  if($(e.target).closest('.myMenuDiv,.myMenuArrow').length === 0){
    // Close it
  }
});

【讨论】：

【解决方案2】：

您可以使用 jQuery is() 函数来检测当前目标是否与特定选择器匹配：

$('ul.container li').click(function(e){
    if ($(e.target).is('.dropdown')) {
        //do something when clicked inside dropdown
    }
})

【讨论】：

我想是这样，但如果可以尽量减少无用事件的触发次数，最好更具体。

【解决方案3】：

使用 Prototype 你可以做这样的事情

    document.observe('click', function(ev) {
        var el = Event.element(ev);
        if ((el !== $('thediv'))
                && !el.descendantOf(thediv)) {
            // hide div here
        }
    });

【讨论】：

哈哈，连标签都没看到，看了问题，看到了document.onclick=...，以为OP没有使用框架，看到了开口;)
不用担心，它也给了我想法，而 jquery 显然对我更有用