javascript - 如何 click() 只点击 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 的单击事件（我猜这是逻辑，因为我也在 firstDiv 的边界内单击）。但是，我只想触发 DIV 的单击事件，我实际上在单击时将鼠标悬停在该 DIV 上。

我怎样才能做到这一点？

score 10 · Accepted Answer

在内部 div 添加：

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

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

score 5 · Accepted Answer

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

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

score 1 · Accepted Answer

你可以这样做 -

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

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

score 1 · Accepted Answer

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

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

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

两者的演示在这里。

score 0 · Accepted Answer

你可以用event.stopPropagation()这个冒泡。像这样的东西：

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

有关这方面的更多信息，请参阅此处的文档

5 回答 5