这篇文章主要介绍了关于对事件冒泡比bubble的代码分析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
冒泡的概念就是 当子元素触发事件的时候 相应的祖宗十八代素也会触发相同的事件
(前提父元素也添加了一样的事件)
eg:儿子 有一个onclick 祖宗十八代 也有onclick
当点击儿子的时候 祖宗十八代的点击事件也会被触发
有时候这种情况会导致很多问题 所以要阻止冒泡
只有被点击的元素才触发事件
不是所有的事件都会冒泡
onblur onfocus onload onerror 没有
其实事件的触发一共有三个过程 ： 捕获阶段--->处于目标阶段---->冒泡阶段
标准浏览器冒泡顺序 子元素-->父辈-->body-->document--->window
IE 子元素-->父辈-->body-->document
接下来上代码 很容易 做一个兼容处理就好了
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>阻止冒泡</title>
</head>
<body>
<input type="button" id="cancelBubble" value="取消冒泡"/>
<script type="text/javascript">
var btn=document.getElementById("cancelBubble");
document.onclick=function(){
alert("冒泡");
}
btn.onclick=function(event){
var event=event||window.event;//兼容
if(event && event.stopPropagation){
event.stopPropagation();
}
else{
//IE 678
event.cancelBubble=true;
}
alert("没有冒泡");
}
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Atas ialah kandungan terperinci 对事件的冒泡比bubble的代码分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah masalah yang boleh diselesaikan oleh acara js yang menggelegak?
Foto Windows tidak boleh dipaparkan
Perbezaan antara tidur win10 dan hibernasi
Bagaimana untuk mencipta folder baharu dalam pycharm
Komponen induk Vue memanggil kaedah komponen anak
Apakah kata laluan perkhidmatan mudah alih?
Komputer dijangkiti dan tidak boleh dihidupkan
vcruntime140.dll tidak dapat ditemui dan pelaksanaan kod tidak dapat diteruskan
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
