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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/GSCurry/article/details/71857127

问题

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

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


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

写了个html页面,该页面主要作用是点击button(”给img添加点击事件”)给button下的图片添加点击事件方法。
如图:
这里写图片描述

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>

累加绑定运行效果:
这里写图片描述

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

是不是很奇怪?


解决方案

解决方案有两种。

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

<!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>

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

<!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>
展开阅读全文

没有更多推荐了,返回首页