事件冒泡和阻止事件冒泡
阿新 • • 發佈:2018-12-26
相同 rip ack con script 冒泡 console func 觸發
定義:事件冒泡:多個元素嵌套,有層次關系,這些元素都註冊了相同的事件,如果裏面的元素的事件觸發了,外面的元素的該事件自動的觸發了.
例子:
HTML代碼
<div id="dv1"> <div id="dv2"> <div id="dv3"></div> </div> </div>
CSS代碼
#dv1{ width: 300px; height: 200px; background-color: red; } #dv2{ width: 250px; height: 150px; background-color: green; } #dv3{ width: 200px; height: 100px; background-color: blue; }
JavaScript代碼
如何阻止事件冒泡:
window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持
e.stopPropagation(); 谷歌和火狐支持,
1 my$("dv1").onclick=function () { 2 console.log(this.id);3 }; 4 my$("dv2").onclick=function () { 5 console.log(this.id);
//阻止事件冒泡 6 window.event.cancelBubble=true; 7 }; 8 9 my$("dv3").onclick=function (e) { 10 console.log(this.id); 11 //阻止事件冒泡 12 e.stopPropagation();
};
事件冒泡和阻止事件冒泡