click点击一次，执行多次的bug

亦凉 2024-02-18 18:19 42阅读 0赞

### *问题* ###

最近做项目为一个添加按钮绑定点击事件，很简单的一个事情，于是我按照通常做法找到元素，使用JavaScript的addEventListener()方法为元素绑定了点击事件，点击同时发送请求。  
完成后看效果，第一次点击没有问题。再一次点击后发现发送了两次请求，后面再点击发现请求的数量越来越多。  
这时我初步判断可能是元素有多个或是多次调用了方法，但找了一遍，发现只为一个元素绑定了事件，且只调用了一次。  
后来通过查资料才知道是点击事件被累加绑定了！那到底什么是累加绑定呢？什么时候会发生累加绑定？累加绑定后该如何解决呢？下面我就通过这三个问题来说一下。

累加绑定：在页面中为一个元素绑定事件，事件执行后页面未刷新且元素还在，然后你再次点击，元素又被绑定个一次点击事件，这样第二次点击就会执行两次，以此类推。

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

### *代码描述以及运行效果描述* ###

写了个html页面，该页面主要作用是点击button（”给img添加点击事件”）给button下的图片添加点击事件方法。  
如图：  
![这里写图片描述][SouthEast]

html：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <title>累加绑定</title>
    </head>
    <body>
        <button id="btn" onclick="addClick()">给img添加点击事件</button>
        <hr>
        <img src="images/title.ico" id="cli"/>
        <script>
        count=1;
        function addClick(){
         
            var cli=document.getElementById("cli");
            cli.addEventListener("click",function(){
         
                alert(count++);
            });
    //      等价于下列jQuery的写法      
    //      $("#cli").click(function(){
         
    //          alert(count++);
    //      });
        }
        </script>
    </body>
    </html>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26

累加绑定运行效果：  
![这里写图片描述][SouthEast 1]

首先点击图片没有蹦出消息框。点击button后，给图片添加点击事件，此时点击图片蹦出了消息框。接着再点击图片，还是蹦出了消息框。随后我又点击了一次button给图片添加点击事件。此时点击图片竟然蹦出了两次消息框。

是不是很奇怪？

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

### 解决方案 ###

解决方案有两种。

方法一：使用jQuery的one()方法。  
该方法为元素绑定一个一次性的事件处理函数，这个事件处理函数只会被执行一次。  
效果图：  
![这里写图片描述][SouthEast 2]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <title>累加绑定</title>
    </head>
    <body>
        <button id="btn" onclick="addClick()">给img添加点击事件</button>
        <hr>
        <img src="images/title.ico" id="cli"/>
        <script>
        count=1;
        function addClick(){
             
            $("#cli").one("click",function(){
         
                alert(count++);
            });
        }
        </script>
    </body>
    </html>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21

方法二：配合off()方法解除绑定。  
该方法为元素绑定一个的事件处理函数，再次给改元素添加相同事件时不会累加绑定。  
效果图：  
![这里写图片描述][SouthEast 3]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <title>累加绑定</title>
    </head>
    <body>
        <button id="btn" onclick="addClick()">给img添加点击事件</button>
        <hr>
        <img src="images/title.ico" id="cli"/>
        <script>
        count=1;
        function addClick(){
             
            $("#cli").off("click").on("click",function(){
         
                alert(count++);
            });
        }
        </script>
    </body>
    </html>

[SouthEast]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d7f7574e8f014c7e8bacbad2769ce387.png
[SouthEast 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d2225f5727b84e239d12cb01a3f6e5d6.png
[SouthEast 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/83497e7b61654445bd2fbd09ea6ae292.png
[SouthEast 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2924f5c229444e589958e2f8d26e72bd.png