javascript - 使用 javascript/jquery 区分 parent 和 child 之间的点击

Question

我嵌套了 2 个元素，分别称为 blanket 和 blanket-content，我想单独识别对父元素所做的点击。

<div id="blanket">
    <div id="blanket-content"></div>
</div>

我遇到的问题是，当我单击子项时，它会在单击时触发父项。我尝试了不同的方法，但我没有成功。我试过这些来玩弄我的代码；

$('#blanket').on('click', function(ev) {
    alert(ev.currentTarget.id); //
});

^ 这会正常触发对 div 的点击，并在点击子项时声明父 ID。

$('#blanket-content').on('click', function(ev) {
        alert(ev.currentTarget.id);
});

^ 这不会触发任何东西

我想要实现的是当我点击 blanket-content 时什么也不会发生，但是当我点击 blanket 时我想做一些事情。

Answer 1

一个简单的解决方案是在 blanket-content 的点击处理程序中停止事件传播，这样它将触发父元素的点击处理程序。

您可以使用 Event.stopPropagation()这样做

$('#blanket').on('click', function(ev) {
  alert(ev.currentTarget.id); //
});


$('#blanket-content').on('click', function(ev) {
  ev.stopPropagation()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blanket">blanket
  <div id="blanket-content">blanket-content</div>
</div>

---

另一种解决方案(why)是检查点击是否发生在 blanket 点击处理程序内的 blanket-content 元素中

$('#blanket').on('click', function(ev) {
  if (!$(ev.target).closest('#blanket-content').length) {
    alert(ev.currentTarget.id); //
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blanket">blanket
  <div id="blanket-content">blanket-content</div>
</div>