iScroll中事件点击触发两次解决方案
之前也看了很多朋友的文章里有讲这个问题。比如使用一个变量记录执行的间隔时间什么的。感觉每次都要去撸一下，比较累人。本人喜欢搬砖前先选工具。其实解决这个方法很简单。iScroll呢其实是截获了点击浏览器时的touchstart和touchend事件。在touchend的时候使用js去触发元素的onclick事件(_end这个函数)。而在实际操作中，先执行了touchend，然后再执行了一次onclick的相关函数。这样就形成了头疼的一次点击两次触发。这本来就一个不是问题的问题。之所以说这是个问题，是因为这样是我们不得不去看一看iScroll的源代码。解决这个问题的途径就是拒绝第二次执行函数。而我的逻辑也正是如此。我们可以在执行完_end函数中的触发click事件的代码后，移除onclick事件上绑定的函数。然后在定时几百毫秒之后在重新把这个事件添加上去。举个例子：
//处理之前 <spanonclick="test()">双击测试</span> //处理之后 <spanonclick="void(0)">双击测试</span>
在移除onclick相关函数之后这个第二次就自然不会再触发test函数了。为了下一次还能继续使用我们可以使用setTimeout的方式把onclick的内容还原回去。
改造后的iscroll源代码(约550行~570行的样子，_end函数中)：
that.doubleTapTimer=setTimeout(function(){
that.doubleTapTimer=null;
//Findthelasttouchedelement
target=point.target;
while(target.nodeType!=1)target=target.parentNode;
if(target.tagName!='SELECT'&&target.tagName!='INPUT'&&target.tagName!='TEXTAREA'){
ev=doc.createEvent('MouseEvents');
ev.initMouseEvent('click',true,true,e.view,1,
point.screenX,point.screenY,point.clientX,point.clientY,
e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,
0,null);
ev._fake=true;
target.dispatchEvent(ev);
/**以下代码为新增代码**/
//找到绑定click事件的元素。
varobj=$(target).attr("onclick")!=null?$(target):$(target).parents("[onclick]")[0];
if(obj!=null){
varclickContent=$(obj).attr("onclick");
if(clickContent!="void(0)"){
//利用新的属性来存储原有的click函数
$(obj).attr("data-clickbak",$(obj).attr("onclick"));
//改变onclick属性值。
$(obj).attr("onclick","void(0)");
//防止暴力点击
if(that.hashBox.length>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函数之前）
hashBox:[],
/*还原被点击对象的事件*/
_clickBack:function(){
varthat=this;
setTimeout(function(){
if(that.hashBox.length>0){
varobj=that.hashBox.pop();
obj.attr("onclick",obj.attr("data-clickbak"));
if(that.hashBox.length>0)that._clickBack();
}
},500);
}
当然，也可以不修改iscroll源代码，通过一个公共函数来实现。
以上就是本文所讲述的全部内容了，希望对大家学习使用iscroll滑动控件有所帮助