为什么 stopPropagation 方法会阻止附加到同一元素的事件？

Question

这就是我正在尝试做的事情：

1. 将两个事件附加到同一个对象（并让它们都处于活动状态）
2. 防止在 DOM 层次结构中向上传播事件（不应触发附加到父元素的事件）

我遇到了第 1 点的问题。我附加了两个事件，但只有一个被解雇。

我在 jsfiddle 上重现了我的案例：https://jsfiddle.net/bavdnthu/

$('.main').on('click', '.testedDiv', function() {
  alert('div clicked #1');
  e.stopPropagation();
});

$('.main').on('click', '.testedDiv', function() {
  alert('div clicked #2');
  e.stopPropagation();
});

$('.main').on('click', 'span', function() {
  alert('span clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="main">
  <div class="testedDiv">
    DIV
    <span>
      Span
    </span>
  <div>
</div>

这是我所看到的：只有“div clicked #1”警报被触发。我希望还能看到第二个：“div clicked #2”。

从w3schools上stopPropagation的描述来看：

传播意味着向上冒泡到父元素或向下捕获到子元素。

同时

stopImmediatePropagation()

 存在，根据 

MDN：

如果多个侦听器针对同一事件类型附加到同一元素，则按照添加顺序调用它们。如果在一次此类调用期间调用 stopImmediatePropagation()，则不会在该元素或任何其他元素上调用剩余的侦听器。

所以我的代码的行为就好像我使用了

stopImmediatePropagation()

，但我没有。我错过了什么？

Answer 1

您的代码中有拼写错误。您没有在

e

 点击处理程序中添加 

.testedDiv

 参数。

您在上面嵌入的代码片段抱怨了这一点。您的第一个处理程序成功发出警报，然后出现错误。这就是为什么第二个不发出警报的原因。

$('.main').on('click', '.testedDiv', function(e) {
  alert('div clicked #1');
  e.stopPropagation();
});

$('.main').on('click', '.testedDiv', function(e) {
  alert('div clicked #2');
  e.stopPropagation();
});

$('.main').on('click', 'span', function() {
  alert('span clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="main">
  <div class="testedDiv">
    DIV
    <span>
      Span
    </span>
  <div>
</div>