출처 : http://ckbcorp.tistory.com/401
* event.stopPropagation() 이 왜 필요한가?
- 상위 엘리먼트의 동일한 이벤트가 호출되는 것을 막기 위하여
- 만약 TR에 onclick이벤트가 걸려 있고, TABLE에도 걸려있을 경우,
TR을 클릭하면 TR이벤트 => TABLE이벤트 순으로 이벤트핸들러가 호출되는데.
이 경우 TABLE이벤트가 trigger되지 않도록 하는 것이 stopPropagation() 이다.
* 참고
- 모질라 사이트에 있는 예제를 참고하면 이해가 쉬울 것이다.
stopPropagation()이 있는 부분을 주석처리 비교하면서 'one' 이 있는 TR을 클릭해 보자
- jQuery의 .live() 함수 등에서 stopPropagation()이 동작하지 않는 문제 - 댓글 참고
--------------------------------------------------------------------------------------------------
stopPropagation(), preventDefault() 대신에 jQuery에서는 return false를 하면 두가지가 같이 적용하는 것으로 인식한다.
하지만 js에서 return false는 preventDefault()만 한것으로 인식한다.
--------------------------------------------------------------------------------------------------
ab, back space 키 입력시 브라우져의 디폴트 동작을 취소할 수 있다.
if (event.preventDefault){
event.preventDefault();
} else{
event.returnValue = false;
}
이벤트가 발생했을 때 상위의 element로 이벤트를 전달하고 싶지 않을 때는 위의
cancelable이나 preventDefault가 아니라 stopPropatation을 사용해 주면 된다.
event.cancelBubble = true; // for IE
if(event.stopPropagation) {
event.stopPropagation();
}
'World Wide Web > jquery' 카테고리의 다른 글
일정 스크롤 내리면 fixed 시키기 (0) | 2014.11.28 |
---|---|
window scroll 막고 해제하기(IE9 이상) (0) | 2014.11.18 |
jquery로 font-size, color를 animate 시켜보기 (1) | 2014.09.16 |
[플러그인] 제이쿼리로 곡선 모션 표현하기 (0) | 2014.05.07 |
다른 페이지로 벗어날때 인터벌 정지시키기 (0) | 2014.05.07 |