TR 태그에 적용된 Click 이벤트 특정 TD에서 적용안되게 하기.

검색어 : table td onclick event

http://mousevm.tistory.com/321

오늘은 <TR> 태그에 의해 테이블의 한 라인 전체에 적용된 onclick 이벤트가 특정 <TD> 태그안에서는 적용 안되도록 하는 방법에 대한 기록을 남긴다.

<tr onclick="function();">
<td></td>
<td></td>
<td><img src="..." onclick="button();"></td>
</tr>

과 같이 되어 있는 경우 <tr onclick="function();"> 태그가 적용된 라인은 클릭 이벤트 발생시 모두 function() 함수가 실행되게 된다.
따라서 <td><img src="..." onclick="();"></td> 태그에서 버튼 이미지를 클릭하게 되면 function() 함수와 button() 함수가 동시에 실행이 되어 문제가 되는 경우가 있다.

이 경우에 버튼을 클릭하면 function() 함수는 적용되지 않고 button() 함수만 적용되게 하는 방법은..
방법이야 여러가지가 있을 수 있지만..

가장 쉽고도 편한 방법은
<td><img src="..." onclick="button();"></td> 태그를 <td onclick="event.cancelBubble = true;"><img src="..." onclick="button();"></td> 이렇게 바꾸어주면 된다.

그러니까 onclick="event.cancelBubble = true;" 만 추가해주면 되는 것이다.

도움이 된 내용의 출처 : onclick 중복 실행 막기