iScroll中事件点击触发两次解决方案

前端之家收集整理的这篇文章主要介绍了iScroll中事件点击触发两次解决方案前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

  之前也看了很多朋友的文章里有讲这个问题。比如使用一个变量记录执行的间隔时间什么的。感觉每次都要去撸一下,比较累人。本人喜欢搬砖前先选工具。其实解决这个方法很简单。iScroll呢其实是截获了点击浏览器时的touchstart和touchend事件。在touchend的时候使用js去触发元素的onclick事件(_end这个函数)。而在实际操作中,先执行了touchend,然后再执行了一次onclick的相关函数。这样就形成了头疼的一次点击两次触发。这本来就一个不是问题的问题。之所以说这是个问题,是因为这样是我们不得不去看一看iScroll的源代码解决这个问题的途径就是拒绝第二次执行函数。而我的逻辑也正是如此。我们可以在执行完_end函数中的触发click事件的代码后,移除onclick事件上绑定的函数。然后在定时几百毫秒之后在重新把这个事件添加上去。举个例子:

代码如下:
//处理之后

在移除onclick相关函数之后这个第二次就自然不会再触发test函数了。为了下一次还能继续使用我们可以使用setTimeout的方式把onclick的内容还原回去。

改造后的iscroll源代码(约550行~570行的样子,_end函数中):

代码如下:
0) { for (var _i = 0; _i < that.hashBox.length; _i++) { if (that.hashBox[_i] == $(obj)) { that.hashBox.splice(_i,1); break; } } } that.hashBox.push($(obj)); that._clickBack(); } }//end } },that.options.zoom ? 250 : 0);

_clickBack函数及hashBox代码片段(加在_end函数之前)

代码如下:
0) { var obj = that.hashBox.pop(); obj.attr("onclick",obj.attr("data-clickbak")); if (that.hashBox.length > 0) that._clickBack(); } },500); }

当然,也可以不修改 iscroll源代码,通过一个公共函数来实现。

以上就是本文所讲述的全部内容了,希望对大家学习使用iscroll滑动控件有所帮助

猜你在找的JavaScript相关文章