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

JavaScript 阻止事件冒泡传递

2009-06-01 21:40 731 查看

关键词：

1、cancelBubble（HTML DOM Event 对象属性）：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。

2、stopPropagation（HTML DOM Event 对象方法）：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

3、 preventDefault（HTML DOM Event 对象方法）通知浏览器不要执行与事件关联的默认动作。

好了，测试代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> JavaScript阻止时间冒泡传递测试 </title>
<meta name="author" content="http://blog.csdn.net/xxd851116" />
<mce:style type="text/css"><!--
div {padding:10px; border:1px solid #EEE;margin:10px;}

--></mce:style><style type="text/css" mce_bogus="1">	div {padding:10px; border:1px solid #EEE;margin:10px;}
</style>
</head>
<body onclick="alert('Body Click');">
这是顶层Body
<div onclick="alert('Div 1 Click');">
这是第1层
<div onclick="alert('Div 2A Click');">这是第2层A
<input type="button" onclick="alert('Button Click');stopBubble(event)" value="点击测试时间冒泡(阻止)！" />
</div>
<div onclick="alert('Div 2B Click');">这是第2层B
<input type="button" onclick="alert('Button Click');" value="点击测试时间冒泡(未阻止)！" />
</div>
</div>
<mce:script type="text/javascript"><!--
var all = document.getElementsByTagName("*");
for (var i = 0; i < all.length; i++) {
//监听用户鼠标,当移动到元素上时
//为元素加上红色边框
all[i].onmouseover = function(e) {
this.style.border="1px solid red";
stopBubble(e);
}
//检查用户鼠标,当移开元素时
//删除我们加上的边框
all[i].onmouseout = function(e) {
this.style.border = "1px solid #EEE";
stopBubble(e);
}
}
function stopBubble(e) {
var e = e ? e : window.event;
if (window.event) { // IE
e.cancelBubble = true;
} else { // FF
//e.preventDefault();
e.stopPropagation();
}
}
// --></mce:script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航