|
何为冒泡事件。 就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。 消除冒泡事件的方法 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> js冒泡事件 </title>
<meta name="Generator" content="NPP-Plugin">
<meta charset="utf-8" >
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<style type="text/css">
.div1{width:300px;height:300px;background:red;margin:0 auto; }
.div1 button{margin:100px 0 0 100px;}
</style>
<div class="div1" id="div1">
<button id="btn">点击</button>
</div>
<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="" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
<script type="text/javascript">
window.onload=function(){
//组织冒泡事件方法
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();
}
} ;
document.getElementById("div1").onclick=function(){
alert("a");
};
document.getElementById("btn").onclick=function(){
doSomething(this,event); //调用方法
alert("b");
}
}
</script>
</body>
</html>
(责任编辑：admin)//如果不调用方法，你在测试的时候，会发现，点击子元素的时候，父级元素也会相应执行，所以为防止页面交互混乱，就需要阻止冒泡事件的发现。 |