[Javascript] 부모 클릭 이벤트 자식요소 클릭 시 무시 시키는 방법

부모요소와 자식요소가 각각의 클릭이벤트를 가지고 있을 때

자식요소 클릭시에 부모 요소의 해당 이벤트가 실행된다.

 

 

e.target 과 e.currentTarget을 이용한 방법

function parantClick(e) {
  if (e.target !== e.currentTarget) return;
  console.log("부모클릭");
}

function childClick(e) {
  console.log("자식클릭");
}

parent.addEventListener("click", parantClick);
child.addEventListener("click", childClick);

if (e.target !== e.currentTarget) return;

위의 코드처럼 진행 시 자식요소 클릭 시 부모요소의 console.log가 찍히지 않는다.

 

자식 요소에 e.stopPropagation() 사용

function parantClick(e) {
  console.log("부모클릭");
}

function childClick(e) {
  e.stopPropagation();
  console.log("자식클릭");
}

 e.stopPropagation 는 상위 엘리먼트들로의 이벤트 전파를 중단시켜준다.

 

+++++++++

 

하지만 부모에 클릭 event가 아닌 <a> 혹은 <link> 태그로 인한 링크 이동이라면

어떻게 제어해야할까?

 

자식 요소에 e.preventDefault() 사용

function parantClick(e) {
  console.log("부모클릭");
}

function childClick(e) {
  e.preventDefault();
  console.log("자식클릭");
}

해당 경우에는 부모와 자식의 console.log가 전부 찍히긴 하지만

부모가 url을 변경하는 태그로 감싸져 있을 때 자식요소 클릭 시 링크가 이동되는것을 막아준다.

 

사실상 마크업상 <a>, <link>태그 안에 클릭될 요소를 넣지 않는 것이 맞다.

그러니 해당 방법은 어쩔 수 없는 상황이 아니라면 지양하도록 하자