event.stopPropagation() 사용 방법 JavaScript

Question

이벤트가 지정된 세 개의 요소가 있습니다. event.stopPropagation을 사용하여 요소 # 1 및 # 2에 대한 이벤트 만 실행되도록하고 # 3에 대해서는 실행하지 않으려면 어떻게해야합니까? 나는 버블 링을 멈추기 때문에 event.stopPropagation을 요소 # 2에 넣었습니다. 내 이해에서, # 3에서 이벤트의 트리거링을 중지해야하지만 작동하지 않는 것처럼 보이며 모든 이벤트가 여전히 실행 중입니다. 함수에 전달 된 이벤트 객체와 파라미터 e라는 때문에

event.stopPropagation(); 

:

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

이 줄 잘못 : 여기 JS 코드이다. 로

당신은이를 작성해야합니다 : 그것은 잘 작동

e.stopPropagation();