阻止事件冒泡event.stopPropagation()

最新推荐文章于 2025-07-04 16:59:10 发布

小牙同学

最新推荐文章于 2025-07-04 16:59:10 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_38435906/article/details/78807515

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文通过一个简单的HTML示例介绍了事件冒泡的概念，并演示了如何使用JavaScript中的`event.stopPropagation()`方法来阻止事件冒泡，从而控制事件处理的范围。

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

/******************

定义和用法

不再派发事件。

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

说明

该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

**********/

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a {
color: red;

}

</style>

</head>

<body>
<div class="div" onclick="tex()">
<a href="#" id= "bt" onclick="tex1()" >发送验证码</a>
</div>
<script>
function tex1(){
alert("a元素的click事件！");
//event.stopPropagation(); -----------------------------若注释掉这句就会弹出两次框，若不注释，只弹出tex1（）函数中的框。因为没有此语句时，div元素与a元素都有onclick事件，且a元素为div元素的子元素，所以点击a元素会产生事件冒泡，也会触发div元素的click事件。当有event.stopPropagation(); 时，阻止了事件冒泡，就之弹出只弹出tex1（）函数中的框。
}
function tex(){
alert("div元素click的事件！")
}
</script>
<script src="js/jquery-3.2.1.min.js"></script>
</body>

</html>