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

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

HTML 代码

  父元素

<div id="father" style="width:600px;height:400px;border:1px solid black;"></div>

  子元素

<div id="son" style="width:300px;height:200px;border:1px solid black;margin:100px auto;"></div>

  组合在一起

<%-- 父元素 --%>    
<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) {
            alert("click father !!!");
        });
        // 点击子元素发生的事件
        $("#son").click(function (e) {
            alert("click son !!!");
        });
    </script>

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

  解决方案：

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

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

  解决后的动图展示

---

  完整代码

 <%-- 父元素 --%>
    <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 来达到预期效果

  修改后的页面代码 

<style type="text/css">
    .father_common {
        width:200px;height:100px;border:1px solid black;margin-bottom:20px;
    }
    .son_common {
         width:100px;height:50px;border:1px solid black;margin:30px auto;
    }
</style>

<%-- 父元素 --%>
    <div id="father" class="father_common">
        <%-- 子元素 --%>
        <div id="son" class="son_common">

        </div>
    </div>

    <script type="text/javascript">
        // 页面加载触发
        $(function () {
            for (var i = 0 ; i <= 2; i++) {
                var div = "";
                div += "<div id='father" + i + "' class='father_common'>"
                div += "    <div id='son" + i + "' class='son_common'>";
                div += "    </div>"
                div += "</div>"

                // 第一圈加载到已有页面元素后
                if (i == 1) {
                    $("#father").after(div);
                // 之后加载到动态加载的页面元素后
                } else {
                    $("#father"+(i-1)).after(div);
                }
                
            }
        })

        // 页面加载完毕触发
        $(document).ready(function () {
            $(".father_common").click(function (e) {
                alert("click father !!!");
            });
            $(".son_common").click(function (e) {
                alert("click son !!!");
            });
        });
    </script>

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

  修改后的页面动图展示

 

 

  查看一下源码

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

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

  最终动图展示

 

 

希望能够帮助到你

over