JQuery - 为什么event.target在这种情况下不起作用？

Question

只是想知道为什么当我点击容器内的警报弹出窗口尽管if语句不显示点击。

另外我会如何测试里面的孩子？

https://jsfiddle.net/w8fd3m67/

$(window).on("click", function(event) { 
 
    var container = $("#container"); 
 
    if ((event.target) !== container) { 
 
    alert("clicked outside"); 
 
    } 
 
});

body { 
 
    height: 600px; 
 
} 
 

 
#container { 
 
    padding: 2rem; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
</div>

干杯

Answer 1

您应该使用.is()

if($(event.target).is(container)) 

Answer 2

使用.is()功能合作mpare事件目标到您的JQuery的元素：

$(window).on("click", function(event) { 
 
    var container = $("#container"); 
 
    if ($(event.target).is(container)) { 
 
    alert("clicked outside"); 
 
    } 
 
});

body { 
 
    height: 600px; 
 
} 
 

 
#container { 
 
    padding: 2rem; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
</div>

Answer 3

比较id。这里$("#container")是一个jQuery对象

$(window).on("click", function(event) { 
 
    if ((event.target.id) !== 'container') { 
 
    alert("clicked outside"); 
 
    } 
 
});

body { 
 
    height: 600px; 
 
} 
 

 
#container { 
 
    padding: 2rem; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
</div>

Answer 4

你DOM元素比较一个jQuery对象，它永远不会匹配。从目标中创建一个jQuery对象，并检查它是否为#container的后代。如果您有#container下的子元素，这也适用。

Updated fiddle

$(window).on("click", function(event) { 
    if ($(event.target).closest('#container').length == 0){ 
    alert("clicked outside"); 
    } 
}); 

Answer 5

试试这个：

​​