Question

我想点击body，menutop内的body除外。

<body>
<div id="menutop">lorem ipsum...</div>
...
</body>

JS

$("body").not($("#menutop")).click(function(){
    console.log("323");
});

也尝试了

var n = $("#menutop");
$("body:not(n)").click(function(){
    console.log("323");
});

但在两种情况下都会点击menutop控制台显示323

Answer 1

选择器$("body").not($("#menutop"))会选择body元素，如果它不是#menutop元素。由于body元素显然不是#menutop元素，因此仍然会选中body元素并将click事件附加到该元素。

即使您单击#menutop元素，点击事件仍会冒泡并触发body元素上的点击事件，因此一个选项是检查是否{{ 1}}是event.target元素：

#menutop

或者，您也可以在点击$(document).on('click', function (event) { if (!$(event.target).closest('#menutop').length) { // ... clicked on the 'body', but not inside of #menutop } });元素时抑制事件冒泡和stop event propagation：

#menutop

Answer 2

您可以在menutop元素上使用event.stopPropagation()，以防止点击进入下方的身体。

有关解决方案，请参阅此codepen

<强> JS

$("body").click(function(){
    alert("323");
});

$("#menutop").click(function(event) {
    event.stopPropagation();
});

Answer 3

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

stopPropagation（）会让你的点击向下传播，并激活身体上的点击。

Answer 4

我们将处理全身的点击事件，然后识别事件的源元素如下

如果点击事件是从目标元素触发的 (#menutop) document.getElementById("menutop").isSameNode(event.target)
如果从目标元素的任何后代触发点击事件 (#menutop) document.getElementById("menutop").contains(event.target)

我们将忽略以上两种情况触发的事件，并为其余触发事件执行所需的操作。

$("body").click(function(event){
    if(
        document.getElementById("menutop").isSameNode(event.target) 
        || document.getElementById("menutop").contains(event.target)
    ){
        // Event triggered from within the #menutop div element
        // Do nothing and return
        return;
    }
    // We are here because click event triggered from outside of #menutop div element
    alert('Click event triggered from outside of #menutop div element');
});

单击除特定div之外的正文

4 个答案: