阻止事件的冒泡

最新推荐文章于 2024-01-17 10:29:19 发布

发哥1997

最新推荐文章于 2024-01-17 10:29:19 发布

阅读量410

点赞数

分类专栏：未分类文章标签：事件冒泡

本文链接：https://blog.csdn.net/yabushandaxue/article/details/47113987

版权

未分类专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.8.0.min.js"></script>
</head>
<body>
<div style="width: 300px;height: 300px;background-color: aqua">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
/*点击div时，body绑定的事件也被执行，*/
$("body").bind("click",bodyHandler);
$("div").bind("click",divHandler);
$("div").bind("click",divHandler2);
})
function divHandler(event){
conlog(event)
event.stopPropagation();/*阻止父级body的事件发生，*/
//event.stopImmediatePropagation();/*阻止其他所有的事件发生*/
}

function bodyHandler(event){
console.log("hello");
conlog(event)
}

function divHandler2(event){
console.log("hello");
conlog(event)
}

function conlog(event){
console.log(event);
}
</script>
</html>

发哥1997

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
阻止事件的冒泡

DocumentABCD$(document).ready(function(){/*点击div时，body绑定的事件也被执行，*/$("body").bind("click",bodyHandler);$("div").bind("click",divHandler);$("div").bind("click",divHan
复制链接

扫一扫