<tr> 이벤트 <tb>에서 제외 [event.cancelBubble=true]

지금 하고 있는 프로젝트에 정말 이해가 안되지만 테이블 tr에 이벤트를 걸고 view 페이지로 넘어가는 것이 있습니다.

 

아니 그런데 고객님께서 그 tr 밑에 있는 td에 있는걸 클릭해서 팝업을 띄워달라고 하십니다.

 

상위에 걸린 이벤트를 취소 해야하는데 

 

return false 는 어림도 없을것이 분명해서 찾아서 사용한게

 

event.cancelBubble=true

 

입니다.

 

정확히는 뭐냐면 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.

 

이벤트 핸들러에서 반환되기 전에 값을 true로 설정하면 이벤트가 전파되지 않습니다.

 

라고 합니다.

 

이번 프로젝트가 죄다 저런식으로 사용해서 종종사용하는 경우가 있어 기록해둡니다.

 

사용예시  이런식으로 function 에 넣거나 td 태그 onClick에 직접 선언해서 사용해도 가능합니다.

 

function popup (id){
            event.cancelBubble=true
            var popYn = $("#popYn").val(); // 여부 확인

            if(popYn == "false" || popYn == false){
                        popMap(id);
            }else{

                        infoArea(id)

            }
}