之前也看了很多朋友的文章里有讲这个问题。比如使用一个变量记录执行的间隔时间什么的。感觉每次都要去撸一下,比较累人。本人喜欢搬砖前先选工具。其实解决这个方法很简单。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 "[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 "codetitle">复制代码 代码如下:
       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,点击,触发两次

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com

评论“iScroll中事件点击触发两次解决方案”

暂无“iScroll中事件点击触发两次解决方案”评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?