嵌套事件问题

2017-12-28

前言

这篇文章是关于jQuery嵌套事件会触发多次事件的问题。一开始我以为原生JS也存在相同的问题，所以没有明确指出是jQuery嵌套事件的问题。之后经过验证发现原生JS不存在这方面的困扰，这里重点说明jQuery如何解决。

1.jQuery存在的问题

这里通过一个简单的例子来说明问题。

完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-2.2.3.min.js"></script>
    <style>
        div{
            width: 100px;
            height:50px;
            margin: 20px;
            line-height: 50px;
            text-align: center;
        }
        .test{
            border: 1px solid #000;
        }
        .abc{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="test">test</div>
<div class="abc">abc</div>
</body>
</html>
<script>
    $(function(){
        $(".test").click(function(){
            console.log("test");
            $(".abc").click(function(){
                console.log("abc");
            });
        });
    })
</script>

存在的问题，如图所示：

从GIF图中可以看出：

当第一次点击test时，点击abc时只触发一次；

当第二次点击test时，点击abc时触发两次；

当第三次点击test时，点击abc时触发三次

…

分析原因时，怀疑是因为事件冒泡造成的，于是在两次点击事件内部都添加了return false; ，但结果依然如此。

目前还不知道具体什么原因，只知道出现了重复绑定的现象。

2.解决方法

unbind() 方法移除被选元素的事件处理程序。

该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。

$(function(){
       $(".test").click(function(){
           console.log("test");
          //unbind('click') 删除$(".abc")元素所有的点击事件，再重新绑定click事件
           $(".abc").unbind('click').click(function(){  
               console.log("abc");
           });
       });
   })