jquery点击事件重复/叠加

来源：互联网发布：mac能用的绘画软件编辑：程序博客网时间：2024/06/05 07:33

原生JS添加点击事件无论添加多少次点击的时候都只会触发一次

而用jquery添加绑定事件添加多少次点击的时候就触发多少次如果想解决这个问题就在点击函数里先用 $(对象).off("click") 取消上一次的点击事件

下面是代码展示

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>test</title></head><body>    <button id="add">点击增加绑定事件</button>    <button id="trigger">点我触发绑定事件</button><script src="jquery-3.1.1.min.js"></script><script>    var $add = $("#add"),        $trigger = $("#trigger"),        num = 0;    $add.click(function() {        $trigger.click(function() {            num++;            alert("第" + num + "次");        });    });    </script></body></html>

jquery代码源文件请自行下载

如上所示生成的页面如果点击增加绑定事件3次然后点触发就会连弹3次窗

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>test</title></head><body>    <button id="add">点击增加绑定事件</button>    <button id="trigger">点我触发绑定事件</button><script>    var add = document.getElementById("add"),        trigger = document.getElementById("trigger"),        num = 0;    add.onclick = function() {        trigger.onclick = function() {            num++;            alert("第" + num + "次");        }    } </script></body></html>

而用原生代码写的增加点击事件则无论添加多少次触发的时候都只会触发一次弹窗

0 0