如何使用 event.stopPropagation() JavaScript

Question

我为三个元素分配了事件。我应该如何使用 event.stopPropagation 以便只执行元素 #1 和 #2 的事件，而不是 #3 的事件？我将 event.stopPropagation 放在元素 #2 中，因为它停止冒泡。根据我的理解，它应该停止触发#3 中的事件，但它似乎不起作用，所有事件仍在执行中。这是JS代码：

    document.addEventListener("DOMContentLoaded", function() {
      document.querySelector('#element1').addEventListener('click', function(e) {
        console.log('Event in #element1 fired!');
      });

      document.querySelector('#element2').addEventListener('click', function(e) {
        event.stopPropagation();
        console.log('Event in #element2 fired!');
      });

      document.querySelector('#element3').addEventListener('click', function(e) {
        console.log('Event in #element3 fired!');
      });
    });

<div id="element3" class="element">
  Element 3
  <div id="element2" class="element">
    Element 2
    <div id="element1" class="element">
      Element 1
    </div>
  </div>
</div>

Answer 1

这一行是错误的：

event.stopPropagation();

因为传递给函数的带有事件对象的参数被命名为e.

你需要这样写：

e.stopPropagation();

如何使用 event.stopPropagation() JavaScript

How to use event.stopPropagation() JavaScript

javascript

stoppropagation