我有三个元素，它们都分配了事件。我应该如何使用 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>