스크립트 이벤트 순서가 자식노드에서부터 상위 부모노드로 올라가면서 연속적으로 실행되는 것을 말한다.
<html> <head> <style type="text/css"> .parent {width:300px; height:300px; background-color:red;} .child {width:150px; height:150px; background-color:yellow;} </style> <script type="text/javascript"> function parent(){ alert("parent clicked"); } function child(){ alert("child clicked"); } </script> </head> <body> <div onclick="parent();" class="parent"> <div onclick="child();" class="child"></div> </div> </body> </html>
위 코드를 실행하면 나오게 되는 화면이다.
부모 <div>와 자식 <div>가 겹쳐지는 부분인 노란색 영역을 클릭하게 되면 "child clicked" 얼럿이 뜨고 나서 "parent clicked" 얼럿이 뜨게 된다.
이것을 막기 위해선 event 속성의 cancleBubble값을 true로 설정하여야 한다.
function child(){ alert("child clicked"); event.cancelBubble = true; }
또는 jQuery를 통해서 다음과 같이 처리할 수도 있다.
jQuery(".child").click(function(e){ e.stopPropagation(); });
'프론트기술 > HTML' 카테고리의 다른 글
| text/javascript와 application/javascript의 차이점 (0) | 2015.09.08 |
|---|---|
| IE11에서 같은 이름을 줘도 팝업창이 계속 새창으로 열리는 문제 (0) | 2015.09.07 |
| 이벤트 캡쳐링(event capturing) (0) | 2015.01.22 |
