<tr> 태그에 등록한 onclick 이벤트, 특정 <td> 태그 제외하기

태그의 속성 중 onclick은 해당 태그를 클릭했을 때 이벤트를 발생시키는데
<tr> 태그의 경우 <td> 태그들을 포함하므로 

<tr> 태그 내에 어느 위치의 <td>를 클릭해도 이벤트가 발생합니다.

(하위 요소에서 상위요소로 이벤트 전파 버블링)

하지만 프로젝트를 진행하다 보면 특정 <td>는 상위요소의 이벤트가 발생하지 않도록 하고 싶을 때가 있습니다.
예) <td> 안에 버튼으로 다른 이벤트를 발생시키고 싶은 경우

 

아래는 그럴 때 간단한 속성 추가로 해결하는 방법입니다.

 

간단하게 특정 <td> onclick 속성에 event.cancelBubble=true를 넣어주면 된다. 

 

MDN Web Docs에 따르면 Event.cancelBubble 속성은 Event.stopPropagation()의 별칭으로

true로 설정해주면 이벤트가 전파되지 않는다.

 

https://developer.mozilla.org/ko/docs/Web/API/Event/cancelBubble

Event.cancelBubble - Web API | MDN

MDN Web Docs에 따르면 cancelBubble은 deprecated로 동작하지 않는 브라우저가 있을 수 있다고하여 수정하는 것을 추천합니다.
cancelBubble 대신 event.stopPropagation() 을 사용하여 버블링을 방지해주세요.