javascript防止事件传播

最新推荐文章于 2025-11-22 06:00:00 发布

原创最新推荐文章于 2025-11-22 06:00:00 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #IE #Firefox #XHTML #CSS #ViewUI

HTML/JS/CSS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了HTML中事件冒泡的概念及其实现方式，并提供了一个在Firefox和IE浏览器中均可运行的示例，展示了如何通过调用特定方法来阻止事件冒泡。

如下面代码

<div onclick=foo()>
<input type="button" value="test" onclick=bar()>
</div>

当点按钮时，容器的onclick事件也会执行。有人把这种现象叫做冒泡。冒泡包括向上的或向下的。解决上面出现问题的方法在ie里只需要在bar()方法里加入 event.cancelBubble = true; 就可以了。

下面是从http://bbs.blueidea.com/thread-2855697-1-1.html得到的在firefox和ie中都可以运行的例子

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
	.adang{width:200px;height:50px;background:green;color:#fff;line-height:50px;text-align:center;margin-bottom:10px;}
</style>
<script type="text/javascript">
	function cancleEventUp(oevent){
		if(document.all) window.event.cancelBubble=true;
		else oevent.stopPropagation();
	}
	document.onclick=function(){
		alert("冒泡到document了");
	}
</script>
</head>
<body>
	<div class="adang" onclick="alert('阿当是帅哥');">点击我(不阻止冒泡)</div>
	<div class="adang" onclick="alert('阿当是帅哥');cancleEventUp(event);">点击我(阻止冒泡)</div>
</body>
</html>