如何在 jQuery 中使对子元素的单击不被视为对其父元素的单击？答案

【问题标题】：How to make a click on a child element not be considered a click on it's parent in jQuery?如何在 jQuery 中使对子元素的单击不被视为对其父元素的单击？
【发布时间】：2011-12-14 01:51:07
【问题描述】：

关于如何检测除指定元素之外的任何地方的点击的问题已得到解答，如下所示：

Event on a click everywhere on the page outside of the specific div

我遇到的问题是试图弄清楚如何检测除给定元素（包括其中一个子元素）之外的任何地方的点击。

例如在这段代码中：

http://jsfiddle.net/K5cEm/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {

$(document).click(function(e) {
   $('#somediv').hide();
});
$('#somediv').click(function(e) {
   e.stopPropagation();
});

});
</script>

<div style="border: 1px solid red; width:100px; height: 100px" id="somediv">

    <span style="display: block; border: 1px solid green; width:50px; height: 50px; margin: 0 auto" id="someSpan"></span>

</div>

点击红色 div 以外的任何地方都会使其隐藏。不仅如此，点击它的子元素（绿色跨度）应该会导致它隐藏。它不应该隐藏的唯一一次是如果您单击它而不是跨度。就目前而言，点击 span 也被视为点击父 div，因此如果点击 span，它不会隐藏 div。

如何做到这一点？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以将点击的目标与相关元素进行比较：

$(document).click(function(e) {
    if (e.target != $('#somediv')[0]) {
        $('#somediv').hide();
    }
});

演示：http://jsfiddle.net/K5cEm/7/

【讨论】：

你明白$(e.target).get(0) 和e.target 是一样的，对吧？ :)
谢谢，不知道它是一个 jQuery 对象。
在这种特殊情况下，检查可以是：if ( e.target.id !== 'somediv' ) { ...
感谢第二次优化。我暂时保持一般性，但如果他/她愿意，OP 可以对其进行优化。
作为一些额外信息，您可以使用 if($("#parentDiv").has(e.target).length) 检查子元素是否包含在 div 中。这对于引导按钮特别有用，您实际上可以点击或

【解决方案2】：

添加这个：

$('#somediv').click(function(e) {
    e.stopPropagation();
}).children().click(function(e) {
    $('#somediv').hide();
});

这是您更新后的工作小提琴：http://jsfiddle.net/K5cEm/5/

【讨论】：

【解决方案3】：

我会这样做：

$(function () {
    var elem = $( '#somediv' )[0];

    $( document ).click( function ( e ) {
        if ( e.target !== elem ) {
            $( elem ).hide();
        }
    });
});

现场演示： http://jsfiddle.net/uMLrC/

所以这个

var elem = $( '#somediv' )[0];

缓存对 DIV 元素的引用。我们想在页面加载时缓存这个引用，这样我们就不必重复查询那个元素。它还提高了代码的可读性。

【讨论】：