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

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

代码如下:

//处理之前
<span onclick="test()">双击测试</span>
//处理之后
<span onclick="void(0)">双击测试</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);
        }

时间: 2024-10-08 00:18:45

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

解决iScroll中事件点击一次却触发两次的问题

var t1=null;//全局 function myClick() { if (t1 == null){ t1 = new Date().getTime(); }else{ var t2 = new Date().getTime(); if(t2 - t1 < 500){ t1 = t2; return; }else{ t1 = t2; } } //自己的代码 } 解决iScroll中事件点击一次却触发两次的问题

iScroll4中事件点击一次却触发两次 解决方案

iScroll是我们在做手机网页中常用的滑动控件之一.单说其功能已相当丰富.单个别时候存在一定的缺陷.正好这次就遇上了.在android的app中嵌入网页时不少手机会出现一次点击两次触发的现象.经过一段时间的折腾,总算想到了一个还算合理的解决放案. 之前也看了很多朋友的文章里有讲这个.比如使用一个变量记录执行的间隔时间什么的.感觉每次都要去撸一下,比较累人.本人喜欢搬砖前先选工具.

Android ListView中Button事件 点击冲突问题的解决方案

今天遇到一个问题:在设置listview  自定义adapter的时候 ,点击item有点击效果,然后点击item布局文件中的某个button 的时候  也同时触发了listview的点击效果, 解决方案是: 1.在adapter布局文件中添加 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk

PHP中实现MySQL嵌套事务的两种解决方案

一.问题起源 在MySQL的官方文档中有明确的说明不支持嵌套事务: 1. Transactions cannot be nested. This is a consequence of the implicit commit performed for any current transaction when you issue a START TRANSACTION statement or one of its synonyms. 但是在我们开发一个复杂的系统时难免会无意中在事务中嵌套了事务

sql server中批量插入与更新两种解决方案分享

若只是需要大批量插入数据使用bcp是最好的,若同时需要插入.删除.更新建议使用SqlDataAdapter我测试过有很高的效率,一般情况下这两种就满足需求了 bcp方式 复制代码 代码如下: /// <summary> /// 大批量插入数据(2000每批次) /// 已采用整体事物控制 /// </summary> /// <param name="connString">数据库链接字符串</param> /// <param n

sql server中批量插入与更新两种解决方案分享(存储过程)

转自http://www.shangxueba.com/jingyan/1940447.html 1.游标方式 复制代码代码如下: DECLARE @Data NVARCHAR(max) SET @Data='1,tanw,2,keenboy' --Id,Name DECLARE @dataItem NVARCHAR(100) DECLARE data_cursor CURSOR FOR (SELECT * FROM split(@Data,';')) OPEN data_cursor FETC

解决jQuery中dbclick事件触发两次click事件

首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbclick可以触发两次click事件.例如一个DOM元素div,既绑定了 click 事件,又绑定了 dblclick 事件,这两个事件分别要做独立的事情.事件处理上没有冲突,都可以各自完成各自的操作.双击的时候虽然是执行了 dblclick 事件,但是在这之前,也执行了click 事件,那么,如何来

解决label点击事件触发两次问题

问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name="sex" />男 </label> <label> <input type="radio" name="sex" />女 </label> 但是,此时,如果label标签有点击事件,则会触发两次.

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下: 为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: ? 1 2 3 4 5 6 7 8 9 10 11 <p id="pLabel">新加一条</p> <ul id="ulLabel">  <li class="liLabel">aaa1</li>  <li class="li