[React] 자식한테 전달되는 target 막는법

todo리스트 삭제하는 이벤트를 구현하려고 e.target속성을 넣고 확인하는데

 

 function deleteClickHandler(e: React.MouseEvent<HTMLButtonElement>) {
    const target = e.target as HTMLButtonElement;
    console.log(target.parentElement);
  }

 

<button onClick={deleteClickHandler}>
	<Delete />
</button>

버튼 안에 있는 SVG파일인 Delete도 선택되는것이다.

 

어느 부분을 누르냐에 따라 path, svg, button이 각각 클릭돼서 다른 타겟의 부모가 나왔다.

하지만 내가 원하는건 button을 클릭했을 때 버튼 자체만 타켓이 되길 원했다.

처음에는 캡쳐링, 버블링문제인줄 알고 e.stopPropagation()속성을 deleteClickHandler에 넣었지만 문제가 해결되지 않았다.

타겟이 문제인것 같아서 찾아봤는데 target, currentTaget두가지 종류가 존재했다.

 

e.target은 부모로부터 이벤트가 위임돼서 실제 이벤트가 발생한 자식요소를 가리킨다. 즉, 직접적으로 클릭한 요소이다.

버튼을 누르면 버튼이 타겟이 되고 안에 있는 svg나 path를 누르면 각각 타겟이 되는것이다.

e.currentTarget을 적용하면 이벤트를 넣은 요소를 직접적으로 가리키기때문에 나와 같은 상황에서는 currentTarget을 쓰는게 적합하다.

 

e.target	e.currentTarget
자식한테 이벤트를 전달하여 직접적으로 클릭한 요소	이벤트를 넣은 요소

 

currentTarget을 넣어서 이벤트를 넣은 부모한테만 타겟이 되었다.

 function deleteClickHandler(e: React.MouseEvent<HTMLButtonElement>) {
    const target = e.currentTarget as HTMLButtonElement;
    console.log(target.parentElement);
  }