JavaScript에서 이벤트 버블링 중단하기
이벤트 버블링은 이벤트가 거치는 어떤 요소에서든지 멈출 수 있습니다.
해당 요소의 코드에서 Event 객체의 stopPropagation 메서드를 호출하면 됩니다.
다음 예시에서 빨간 블록을 클릭하면, 자신에게서 먼저 실행되고, 그 다음 파란 블록에서 실행됩니다. 그리고 여기서 멈춥니다. 파란 블록이 더 이상의 버블링을 중단시켰기 때문에 초록 블록은 반응하지 않습니다:
elem1.addEventListener('click', function() {
console.log('초록색');
});
elem2.addEventListener('click', function(event) {
console.log('파란색');
event.stopPropagation(); // 버블링 중단
});
elem3.addEventListener('click', function() {
console.log('빨간색');
});
확인해 보세요:
