您的位置：首页 > Web前端 > JavaScript

javascript中的事件冒泡

2015-03-24 17:00 162 查看

在html页面中，如果两个控件正好叠加，并且两个控件都绑定了临听事件的话，里面的控件在事件被触发时，会发生事件冒泡的现象。

示例如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
</head>

<body>
<style type="text/css">
#wrapper{padding:20px 0px;background:black;width:150px;text-align:center;}
</style>

<div id="wrapper">
<input type="button" value="click me" id="btn" />
</div>

<script type="text/javascript">
var wrapper=document.getElementById("wrapper");
var btn=document.getElementById("btn");

wrapper.onclick=function(){  //结果显示1
alert( "1");
}

btn.onclick=function(){    //结果会先显示2, 再显示1      事件冒泡了
alert("2");
}
</script>
<br />

阻止冒泡的实现:在ie通过设置event的cancelBubble属性为true,在ff下设置event的stopPropagation实现.
</body>
</html>

因为ie和ff对阻止冒泡的执行方法不同，所以对阻止冒泡的功能做了封装. 如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
</head>

<body>
<style type="text/css">
#wrapper{padding:20px 0px;background:black;width:150px;text-align:center;}
</style>

<div id="wrapper">
<input type="button" value="click me" id="btn" />
</div>

<script type="text/javascript">
var wrapper=document.getElementById("wrapper");
var btn=document.getElementById("btn");

//封装阻止冒泡的动作
function stopPropagation( e){
e=window.event||e;
if( document.all ){
e.cancelBubble=true;	  //在ie通过设置event的cancelBubble属性为true
}else{
e.stopPropagation();	  //在ff下设置event的stopPropagation实现
}
}
wrapper.onclick=function(){  //结果显示1
alert( "1");
}

btn.onclick=function(e){    //结果会先显示2, 再显示1
alert("2");
stopPropagation( e );
}
</script>
<br />

阻止冒泡的实现:在ie通过设置event的cancelBubble属性为true,在ff下设置event的stopPropagation实现.
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航