[JS] event.stopPropagation을 웬만해서 사용하지 않아야 하는 이유

웹 사이트를 체험하는 유저의 동향을 파악하거나 기타 데이터를 쌓기 위해 웹 서비스의 애널리틱스는 거의 반필수적으로 사용한다.

 

이러한 웹 애널리틱스 툴에선 event bubbling을 통해 event를 탐지하고 데이터를 수집하는 경우가 있는데, stopPropagation을 사용할 경우 event bubbling이 일어나지 않아 해당 툴이 클릭을 캡쳐하지 못할 수 있다.

 

그러하여 stopPropagation은 완전히 통제된 상황이 아닌이상 사용하지 않아야 한다.

 

stopPropagation을 대체할 수 있는 방법은 내 경우에는 다음과 같이 구현한다.

 

Example

const box1Ref = document.getElementById('box-1')
const box2Ref = document.getElementById('box-2')
const box3Ref = document.getElementById('box-3')
  
box3Ref.addEventListener("click", (e) => {
  console.log('box 3 clicked => ', e)
  window.alert('box 3 alert!')
})
box2Ref.addEventListener("click", (e) => {
  if (e.currentTarget === e.target) {
    console.log('box 2 clicked => ', e)
    window.alert('box 2 alert!')
  }
})
box1Ref.addEventListener("click", (e) => {
  if (e.currentTarget === e.target) {
    console.log('box 1 clicked => ', e)
    window.alert('box 1 alert!')
  }
})