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

1 个答案: