jQuery的onclick事件导致点击事件累计触发的问题
程序员文章站
2022-07-13 12:40:21
...
问题场景
维护公司老项目的时候,发现以下问题。
在使用jQuery中的click事件对页面中某个元素对象进行绑定时,如果不采用防抖/节流的写法会出现事件被多次绑定的情况。如果发生这种问题,会导致一次触发请求多次的情况,直接导致服务器的压力飙升。严重的话,服务器会直接挂掉。接下来具体说一下这个问题是如何形成的。
<div onclick="handleClick()">点我</div>
<div id="boxId">触发</div>
<script type="text/javascript" src="../js/jquery-1.10.2.min.js" ></script>
<script>
function handleClick(){
$('#boxId').click(function(){
console.log(123);
});
}
</script>
handleClick函数中的内容是让$(’#boxId’)对象绑定click事件,当我们不断触发handleClick事件时,假设触发10次handleClick函数,我们只要点击一次下边的click绑定事件,就会重复打印10次123。如果我们把代码换成对于后台的请求,那么就会出现请求10次的情况。
解决方案
其实jQuery中已经给了解决方案,只是我们在使用时忽略了这种情况的处理。我们可以从绑定事情这里入手,既然每调用一次函数就会绑定一次,那么我们就想办法让绑定事件只进行一次绑定就可以啦。就像我们先清空,再添加内容一样,避免多次添加进行累加就可以啦。
有两种方案可以实现只绑定一次的效果,其实都是通过解除绑定再重新进行绑定的方式来进行处理的。
第一种:
$('#boxId').unbind('click').bind('click',function(){
console.log(123);
});
第二种:
$('#boxId').off('click').on('click',function(){
console.log(123);
})
思考总结
元素对象绑定事件的行为,jQuery并没有自己清除掉之前绑定的方法,而是通过提供unbind和off来清除之前的绑定。经过对移动端zepto中的tap事件进行测试发现,tap事件绑定同样也存在这样的问题,要清除绑定的话,同样也可以使用这两种方式来清除之前的绑定关系即可。
推荐阅读
-
解决jQuery ajax动态新增节点无法触发点击事件的问题
-
解决Js先触发失去焦点事件再执行点击事件的问题
-
jquery mobile的触控点击事件会多次触发问题的解决方法
-
jquery中 苹果手机对on触发的点击事件无效果
-
jQuery第一次运行页面默认触发点击事件的实例
-
jquery的click事件缺陷问题:绑定class了但是在ajax拼接刷新后点击事件不起作用问题的解决办法
-
jquery live方法,解决jquery动态添加按钮无法触发点击事件的问题
-
jQuery的onclick事件导致点击事件累计触发的问题
-
解决jquery .on事件累计触发的问题
-
jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递