[React] onClick target - 자식 요소 클릭 이벤트 방지 (target, currentTarget 차이)

 

이벤트 버블링은 자식 요소를 클릭했을 때 상위 부모 요소까지 선택되는 현상이라 e.stopPropagation을 사용하면 간단하게 해결할 수 있다. 하지만 반대로 클릭했을 때 부모 요소를 출력하고 싶은데 자식 요소가 선택되는 경우가 있었다. 어떻게 해결해야 할까?

 

 

 

 

e.target과 e.currentTarget의 차이점

e.currentTarget은 내가 click 이벤트를 걸어놓은 요소를 직접적으로 가리킨다. 반면 e.target은 부모 요소로부터 이벤트가 위임되어 실제 이벤트가 발생한 자식 요소(직접적으로 클릭한 요소)를 가리킨다.

 

구분	설명
e.target	실제 이벤트가 발생하는 요소를 가리킨다.
e.currentTarget	이벤트 리스너가 적용된 요소를 가리킨다.

 

 따라서 부모 요소에 이벤트가 걸려있다면 e.currentTarget을 사용해야 정상적인 동작이 가능하다.

 

 

See the Pen currentTarget vs. target by cw (@fromnowwon) on CodePen.