欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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事件绑定同样也存在这样的问题,要清除绑定的话,同样也可以使用这两种方式来清除之前的绑定关系即可。

上一篇: re正则模块

下一篇: 笔记12