javascript - 如何在 jQuery 中单击子元素不被视为单击其父元素？

Question

关于如何检测除指定元素以外的任何地方的点击的问题已经回答了几个项目，如下所示:

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。

如何实现？

Answer 1

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

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

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