event.stopPropagation（）の使用方法JavaScript

Question

イベントが割り当てられた3つの要素があります。 event.stopPropagationはどのように使用すればよいのですか？要素＃1と＃2のイベントだけが実行されますが、＃3では実行されません。私はそれがバブリングを停止するので、要素＃2にevent.stopPropagationを入れます。私の理解では、それは＃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();