点击子元素却也触发父元素的点击事件

╰半橙微兮° 2022-03-17 12:44 585阅读 0赞

> 在前端开发时，经常出现父元素有点击事件，子元素也有点击事件，在点击子元素时却会把父元素的点击事件也触发，这种情况叫做事件冒泡，解决的方案有很多种，这里记录一下比较常用，比较好用的一种解决方案

## HTML 代码 ##

**  父元素**

**子元素**

**  组合在一起**

**  页面效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDAyMjAw_size_16_color_FFFFFF_t_70][]

**  添加点击事件**

**  动图展示页面点击后的效果：点击子元素却也触发了父元素的点击事件**

![20190224162906385.gif][]

**  解决方案：**

在点击了子元素的时候触发了父元素的点击事件，所以得在父元素的点击事件中添加控制，代码如下

// 点击父元素发生的事件
            $("#father").click(function (e) {
                if (e.target.id != "son") {
                    alert("click father !!!");
                }
            });

**  解决后的动图展示**

![20190224164105259.gif][]

--------------------

**  完整代码**

<%-- 父元素 --%>
        <div id="father" style="width:600px;height:400px;border:1px solid black;">
            <%-- 子元素 --%>
            <div id="son" style="width:300px;height:200px;border:1px solid black;margin:100px auto;">
    
            </div>
        </div>
    
        <script type="text/javascript">
            // 点击父元素发生的事件
            $("#father").click(function (e) {
                if (e.target.id != "son") {
                    alert("click father !!!");
                }
            });
            // 点击子元素发生的事件
            $("#son").click(function (e) {
                alert("click son !!!");
            });
        </script>

**  注： e.target.id 表示当前元素的 id**

--------------------

## 扩展 ##

> 通常我们开发的时候，页面上很多元素是循环遍历出来的，比如遍历多个 div ，或者无序列表 ul li 等等.. 这时，就不能写固定的元素 id ， 因为一个页面上的 id 是唯一的，不可重复的，这时改如何使用 **e.target.id**来达到预期效果

**  修改后的页面代码**

**    注：这里在多个相同元素设置 id 时，使用一样的前缀，后面添加当前遍历的索引，这些就可以避免重复**

**  修改后的页面动图展示**

![20190224172520155.gif][]

**  查看一下源码**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDAyMjAw_size_16_color_FFFFFF_t_70 1][]

**  修改解决方案，还是在父元素中控制**

// 点击父元素
    $(".father_common").click(function (e) {
         if (e.target.id.indexOf("son") == -1) {
             alert("click father !!!");
         }
    });

**  最终动图展示**

![20190224182629456.gif][]

希望能够帮助到你

over

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDAyMjAw_size_16_color_FFFFFF_t_70]: /images/20220317/c5c9c669fd764599a1c8d71a8018f4e2.png
[20190224162906385.gif]: /images/20220317/4aac3d58568a4e039000835818e92d15.png
[20190224164105259.gif]: /images/20220317/1a4e2739cd74471e90fdd052330bb709.png
[20190224172520155.gif]: /images/20220317/632e4c3f5b034e4387a4dbc116e75c1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDAyMjAw_size_16_color_FFFFFF_t_70 1]: /images/20220317/9d86f1c018f14847b4f1d4e48b3232e6.png
[20190224182629456.gif]: /images/20220317/268fa5223a6e4c9ea11b04051b427eab.png