如果使用“onclick”绑定，“stopPropagation”无法正常工作

Question

我在包含多个点击事件处理程序的页面上有以下 span：

<span class="abc">xyz</span>

现在我需要停止冒泡它的点击事件。可以通过两种方式实现：

在其中一个点击处理程序中添加 stopPropagation：（Child-2 in fiddle）
```
$(document).on("click", ".abc", function (e) {
    e.stopPropagation();
});
```
在这种情况下，跨度的所有点击处理程序都被调用，父处理程序的 none 被调用，这是理想的行为。
添加一个 onclick 属性如下所示：(Child-1 in fiddle)
```
<span class="abc" onclick="event.stopPropagation()">xyz</span>
```
在这种情况下，none 个点击处理程序被调用（既不是子跨度也不是父跨度）。

有人可以解释为什么在第二种情况下没有调用子 span 的点击处理程序吗？

Fiddle:

$(document).on("click", ".abc", function (e) {
    alert("child click!");
    e.stopPropagation();
});

$(document).on("click", "#parent", function () {
    alert("parent click!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="parent">
  <span class="abc" onclick="event.stopPropagation()">Child-1!</span>
  <br />
  <span class="abc">Child-2!</span>
</span>

Answer 1

您在使用 onclick 属性时看不到点击，因为点击从未到达 document — 因为您停止了传播。

您正在使用事件委托：

$(document).on("click", ".abc", function (e) {
// ---------------------^^^^^^^
    alert("child click!");
    e.stopPropagation();
});

$(document).on("click", "#parent", function () {
// ---------------------^^^^^^^^^^
    alert("parent click!");
});

这意味着您实际上是在 document 上挂钩处理程序。如果点击从不冒泡到文档，jQuery 无法触发您的委托处理程序。

如果使用“onclick”绑定，“stopPropagation”无法正常工作

`stopPropagation` not working properly if bound using `onclick`

javascript

jquery

dom-events

stoppropagation