如何点击（）只点击DIV，不包含DIV？

Question

<div id="firstDiv" style="width:1000px;height:600px;">
    <div id="secondDiv" style="width:200px;height:200px;"></div>
</div>

两个DIV都有click（）事件。当我单击secondDiv时，firstDiv的click事件也被触发（我猜这是逻辑，因为我也点击了firstDiv的边框内）。然而，我只想点击DIV的点击事件，实际上我点击了鼠标。

我该如何实现？

Answer 1

在内部div上添加：

$('#secondDiv').click(function(e){e.stopPropagation();});

.stopPropagation()将阻止点击事件从内部div冒泡到父div或任何其他祖先。

Answer 2

默认情况下，DOM元素会使事件冒泡。您可以使用stopPropagation停止

$('#secondDiv').on('click', function(e){
    e.stopPropagation();
});

Answer 3

你可以这样做 -

$('#secondDiv').click(function(event) {
    // do your stuff
    return false;
 });

return false;相当于event.stopPropagation()和event.preventDefault()

Answer 4

您需要使用event.stopPropagation()来阻止事件冒泡到父元素（在您的情况下）。 preventDefault看起来很有希望，但实际上它可以防止默认操作 - 而不是冒泡。

$("#firstDiv").click(function() {
  alert("Div One");
});

$("#secondDiv").click(function(e) {
  e.stopPropagation();
  alert("Div Two");
});

here的演示。

Answer 5

您可以使用event.stopPropagation()进行此冒泡。像这样：

$("secondDiv").click(function(event) {
  event.stopPropagation();
   //Write your logic here
});

有关此内容的更多信息，请参阅文档HERE