js事件冒泡

最新推荐文章于 2024-07-17 15:26:15 发布

雪花女神

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量163

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_46279019/article/details/122340122

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<body>
　　<form id="form1">
　　　　<div id="divOne" οnclick="alert('我是最外层');">
　　　　　　<div id="divTwo" οnclick="alert('我是中间层！')">
　　　　　　　　<a id="divThree" href="http://www.baidu.com" οnclick="alert('我是最里层！')">点击我</a>
　　　　　　</div>
　　　　</div>
　　</form>
</body>

什么是事件冒泡？

运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层---->然后再链接到百度.这就是事件冒泡，本来我只点击ID为divThree的标签，但是确执行了三个alert操作。事件冒泡过程（以标签ID表示）：divThree----> divTwo----> divOne 。从最里层冒泡到最外层。

如何阻止事件冒泡？

（1）event.stopPropagation()

<script type="text/javascript">
        $(function() {
            $("#divThree").click(function(event) {
                event.stopPropagation();
            });
        });
<script>

点击“点击我”，会弹出：我是最里层，然后链接到百度

事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）

（2）event.preventDefault()

<script type="text/javascript">
$(function() {
　　$("#divThree").click(function(event) {
　　　　event.preventDefault()
　　});
});
<script>

点击“点击我”，会弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度

事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

（3）return false

<script type="text/javascript">
$(function() {
　　$("#divThree").click(function(event) {
　　　　return false
　　});
});
<script>

点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面

事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

雪花女神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件冒泡

<body>　　<form id="form1">　　　　<div id="divOne" onclick="alert('我是最外层');">　　　　　　<div id="divTwo" onclick="alert('我是中间层！')">　　　　　　　　<a id="divThree" href="http://www.baidu.com" onclick="alert('我是最里层！')">点击我</a>　　　　　　&.
复制链接

扫一扫