手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >iScroll中事件点击触发两次解决方案
iScroll中事件点击触发两次解决方案
摘要:之前也看了很多朋友的文章里有讲这个问题。比如使用一个变量记录执行的间隔时间什么的。感觉每次都要去撸一下,比较累人。本人喜欢搬砖前先选工具。其...

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

复制代码 代码如下:

//处理之前

<span>双击测试</span>

//处理之后

<span>双击测试</span>

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

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

复制代码 代码如下:

that.doubleTapTimer = setTimeout(function () {

that.doubleTapTimer = null;

// Find the last touched element

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事件的元素。

var obj = $(target).attr("onclick") != null ? $(target) : $(target).parents("[onclick]")[0];

if (obj != null) {

var clickContent = $(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 () {

var that = this;

setTimeout(function () {

if (that.hashBox.length > 0) {

var obj = that.hashBox.pop();

obj.attr("onclick", obj.attr("data-clickbak"));

if (that.hashBox.length > 0) that._clickBack();

}

}, 500);

}

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

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

【iScroll中事件点击触发两次解决方案】相关文章:

JQuery中DOM实现事件移除的方法

简介JavaScript中用于处理正切的Math.tan()方法

JavaScript实现点击文字切换登录窗口的方法

JavaScript中的异常处理方法介绍

JavaScript中的Math.E属性使用详解

在JavaScript中使用NaN值的方法

javascript中CheckBox全选终极方案

JQuery中上下文选择器实现方法

浅谈javascript事件取消和阻止冒泡

JavaScript中switch语句的用法详解

精品推荐
分类导航