本文介绍了JQuery中事件冒泡的基本概念，并通过一个具体的示例展示了如何使用stopPropagation方法来阻止事件冒泡。此外，还提供了代码示例帮助理解。
JQuery中的事件冒泡是指事件会按照DOM层次结构像水泡一样不断向上直至顶端，如下代码：
当点击div后事件会触发,从里到外依次弹出"div click","span click","body click"。如果想要在点击div时只弹出"div click",需要阻止事件冒泡,只需在div的click事件对象中调用stopPropagation方法，阻止事件冒泡代码如下：
此时点击div时只会弹出"div click"。
<html>
<head><title>test1</title>
<script src="./jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready (
function() {
$("body").bind("click", function() {
alert("body click");
});
$("span").bind("click", function(event) {
alert("span click");
});
$("#msg").bind("click", function(event) {
alert("div click");
});
}
);
</script>
</head>
<body>
<span>
<div id="msg">aaa</div>
</span>
</body>
</html>
当点击div后事件会触发,从里到外依次弹出"div click","span click","body click"。如果想要在点击div时只弹出"div click",需要阻止事件冒泡,只需在div的click事件对象中调用stopPropagation方法，阻止事件冒泡代码如下：
$("#msg").bind("click", function(event) {
alert("div click");
event.stopPropagation();
});
此时点击div时只会弹出"div click"。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
