[HTML, JS] Table TR의 onclick이 특정 TD에서는 작동 안되게 하기

문제

 - html 테이블에서 td의 button을 누르는데 자꾸 tr의 onclick함수(functionA)가 호출됨.

이유

- td 의 prarentElement인 tr의 onclick(functionA)이 button의 onclick(functionB)보다 우선 실행됨 

문제의 소스

 <tr onclick="functionA()";> 
	<td>aa</td>
    <td>bb</td>
	<td>cc</td>
	<td><button onclick="functionB()">수정</button></td>
</tr>

해결방법

 <tr onclick="functionA()";> 
	<td>aa</td>
    <td>bb</td>
	<td>cc</td>
	<td onclick="event.cancleBubble=true;"><button onclick="functionB()">수정</button></td>
</tr>

 

해당하는 td의 onclick에 onclick="event.cancleBubble=true;"를 추가하여 부모 Element의 event를 받지 않게 구성한다.