我相信很多人都玩过按钮事件里面再放一个按钮事件, 如果利用原生写程序的话就没什么问题, 再说我们总不能老是用原生方法吧, 总得理一下 jQ 吧. 一用就出事了. 让我们看下出问题的 jQ 事件吧(代码自行复制):
例子操作步骤: 连续多次按点击变色按钮, 然后再按一次提示按钮, 然后惊喜就来了.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <style>
- .demo{
- width: 200px;
- height: 200px;
- background-color: red;
- }
- </style>
- </head>
- <body>
- <div class="demo"></div>
- <button class="changeColor">点击变色</button>
- <button class="prompt">点击提示</button>
- <script src="js/jquery-3.3.1(1).js"></script>
- <script>
- // 原生方法
- /*var changeColor = document.querySelector(".changeColor");
- var prompt = document.querySelector(".prompt");
- var div = document.querySelector(".demo");
- changeColor.onclick = function(){
- div.style.backgroundColor = "blue";
- prompt.onclick = function(){
- alert("变色了呢");
- }
- }*/
- // jQ 方法
- $(".changeColor").on("click",function(){
- $(".demo").CSS("backgroundColor","blue");
- $(".prompt").on("click",function(){
- alert("变色了");
- })
- })
- </script>
- </body>
- </html>
那么出现这个问题原因何在?
实不相瞒这个问题是因为点击事件累加绑定, 那么点击事件累加绑定是什么呢?
点击事件累加绑定是在页面中为一个元素绑定事件, 事件执行后页面未刷新且元素还在, 然后你再次点击, 元素又被绑定个一次点击事件, 这样第二次点击就会执行两次, 以此类推.
解决方法:(代码自行复制记得导入 jQ)
第一种利用 jQ 的 one()方法
原理: one()方法是为每一个匹配元素的特定事件 (像 click) 绑定一个一次性的事件处理函数.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <style>
- .demo{
- width: 200px;
- height: 200px;
- background-color: red;
- }
- </style>
- </head>
- <body>
- <div class="demo"></div>
- <button class="changeColor">点击变色</button>
- <button class="prompt">点击提示</button>
- <script src="js/jquery-3.3.1(1).js"></script>
- <script>
- // jQ 方法
- $(".changeColor").one("click",function(){
- $(".demo").css("backgroundColor","blue");
- $(".prompt").on("click",function(){
- alert("变色了");
- })
- })
- </script>
- </body>
- </html>
第二种利用 jQ 的 off()方法
原理: off()方法是删除 on()方法绑定的事件的, 也可以删除 on()绑定的事件类型或者某一个事件. 所以我们在添加事件之前删除之前绑定的.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <style>
- .demo{
- width: 200px;
- height: 200px;
- background-color: red;
- }
- </style>
- </head>
- <body>
- <div class="demo"></div>
- <button class="changeColor">点击变色</button>
- <button class="prompt">点击提示</button>
- <script src="js/jquery-3.3.1(1).js"></script>
- <script>
- // jQ 方法
- $(".changeColor").off("click").on("click",function(){
- $(".demo").css("backgroundColor","blue");
- $(".prompt").off("click").on("click",function(){
- alert("变色了");
- })
- })
- </script>
- </body>
- </html>
两个够用了吧.
来源: http://www.qdfuns.com/note/48832/30527d5a422e900d49f0ea91a938a3a4.html