首頁 > 開發者 > JavaScript
JS冒泡事件的快速解決方案
這篇文章主要是對JS冒泡事件的快速解決方案進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所協助
何為冒泡事件
就是當設定了多個div的嵌套時；即建立了父子關係，當父div與子div共同加入了onclick事件時，當觸發了子div的onclick事件後，子div進行相應的js操作。但是父div的onclick事件同樣會被觸發。這就造成了事件的多層並發，導致了頁面混亂。這就是冒泡事件。
消除冒泡事件的方法
阻止JavaScript事件冒泡傳遞（cancelBubble 、stopPropagation）
下面的一段代碼即可以很好的解釋是麼是冒泡效果，什麼叫消除冒泡效果
代碼如下:
<html>
<head>
<title> 阻止JavaScript事件冒泡傳遞（cancelBubble 、stopPropagation）</title>
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />
<script type="text/javascript">
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event; //判斷瀏覽器的類型，在基於ie核心的瀏覽器中的使用cancelBubble
if (window.event) {
e.cancelBubble=true;
} else {
//e.preventDefault(); //在基於firefox核心的瀏覽器中支援做法stopPropagation
e.stopPropagation();
}
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
<p>This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</html>
把代碼直接複製後，開啟當點擊child1時不僅會彈出 child1 對話方塊還會彈出 parent1
這就是冒泡事件
但是單擊chile2隻會彈出child2卻不會彈出 parent2，這便是應用了阻止冒泡事件的特效的效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
