JavaScript事件传播(冒泡机制)_简述浏览器中事件的冒泡传播机制-CSDN博客

本文详细介绍了JavaScript中的事件冒泡机制，解释了如何利用event.stopPropagation()方法阻止事件冒泡，以及return false的方式取消默认行为并阻止事件传播。通过一个具体的示例展示了不同情况下的事件传播行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript事件传播(冒泡机制)

定义:JavaSciprt事件中有两个很重要的特性：事件冒泡以及 目标元素 。

事件冒泡:

当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

目标元素:

任何一个事件的目标元素都是最开始的那个元素，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。

我的目的很简单,做一个类型window桌面的web页面.当单击开始菜单时弹出一个层,当单击桌面其他地方时隐藏开始菜单.以前对js的冒泡机制有点了解,知道window.event.cancelBubble 来设置是否启用事件传播.但是这只能在IE是使用.如果跨浏览器就不太合适了.Jquery中的event.stopPropagation()解决了浏览器的兼容性.以下举例说明:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery - Start Animation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("div").css({ border: "1px solid red" });
$("#div1").css({ height: "500px", width: "500px" }).bind("click", function (event) { alert("div1"); return false;});
$("#div2").css({ height: "300px", width: "300px" }).bind("click", function (event) { event.stopPropagation(); alert("div2"); });
$("#div3").css({ height: "100px", width: "100px" }).bind("click", function (event) { alert("div3"); });
$(document).bind("click", function (event) { alert("document"); });
});
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
</body>
</html>