jQuery 事件冒泡及解决

最新推荐文章于 2024-04-22 15:31:17 发布

~码中赤兔~

最新推荐文章于 2024-04-22 15:31:17 发布

阅读量530

点赞数

分类专栏： JS基础 jQuery 文章标签： jquery html5 javascript

本文链接：https://blog.csdn.net/m0_56557880/article/details/120652095

版权

JS基础同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

在jQuery中点击触发事件的时候，有时候会导致其他事件一同触发，其他事件一般为该盒子的父元素的事件：例如创建一个div里面包含一个div：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Document</title>
</head>
<style>
    #out{
        background-color: blue;
        width: 100px;
        height: 100px;
    }
    #inside{
        background-color: red;
        width: 50px;
        height: 50px;
    }
</style>
<body>
    <div id="out">
        <div id="inside"></div>
    </div>
</body>
</html>

效果如下：

添加两个触发事件：外层盒子和内层盒子点击分别弹出我是外层和我是内层：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Document</title>

</head>
<style>
    #out{
        background-color: blue;
        width: 100px;
        height: 100px;
    }
    #inside{
        background-color: red;
        width: 50px;
        height: 50px;
    }
</style>
<body>
    <div id="out">
        <div id="inside"></div>
    </div>
</body>
<script>
    $('#inside').click(function(){
        alert("我是内层")
    })
    $('#out').click(function(e){
        alert("我是外层")
    })
</script>
</html>

此时点击内层红色区域，会发现触发了两个事件：

但是要显示内层事件就可以。

解决办法：

1.e.stopPropagation()

在子元素的触发事件中添加参数e和e.stopPropagation()，停止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Document</title>

</head>
<style>
    #out{
        background-color: blue;
        width: 100px;
        height: 100px;
    }
    #inside{
        background-color: red;
        width: 50px;
        height: 50px;
    }
</style>
<body>
    <div id="out">
        <div id="inside"></div>
    </div>
</body>
<script>
    $('#inside').click(function(e){
        alert("我是内层");
        e.stopPropagation(); // 停止冒泡
    });
    $('#out').click(function(e){
        alert("我是外层");
    });
</script>
</html>

2.添加判断，点击是在哪个页面，当前页面再触发 e.target==e.currentTarget

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Document</title>

</head>
<style>
    #out{
        background-color: blue;
        width: 100px;
        height: 100px;
    }
    #inside{
        background-color: red;
        width: 50px;
        height: 50px;
    }
</style>
<body>
    <div id="out">
        <div id="inside"></div>
    </div>
</body>
<script>
    $('#inside').click(function(e){
        if(e.target==e.currentTarget){
            alert("我是内层");
        }
    });
    $('#out').click(function(e){
        if(e.target==e.currentTarget){
            alert("我是外层");
        }
    });
</script>
</html>

~码中赤兔~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 事件冒泡及解决

在jQuery中点击触发事件的时候，有时候会导致其他事件一同触发，其他事件一般为该盒子的父元素的事件：例如创建一个div里面包含一个div：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
复制链接

扫一扫