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

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

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

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

时间: 2024-12-01 07:15:16

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

window.onload绑定多个事件的两种解决方案_javascript技巧

前言 有些函数,必须在网页加载完毕后执行.比如:涉及DOM操作的. 网页加载完毕时会触发一个onload事件,将函数绑定到这个事件上即可. 复制代码 代码如下: window.onload = myFunction; 问题来了:如果需要同时绑定多个事件,该如何处理呢?有两种解决方法 方案一 创建一个匿名函数,来容纳需要绑定的多个事件,再讲这个匿名函数绑定到onload事件上 window.onload = function(){ firstFunction(); secondFunction()

Javascript中实现trim()函数的两种方法_javascript技巧

在JavaScript中我们需要用到trim的地方很多,但是JavaScript又没有独立的trim函数或者方法可以使用,所以我们需要自己写个trim函数来实现我们的目的. 方案一: 以原型方式调用,即obj.trim()形式,此方式简单且使用方面广泛,定义方式如下: 复制代码 代码如下: <script language="javascript"> /** * 删除左右两端的空格 */ String.prototype.trim=function() {      ret

Javascript 文件夹选择框的两种解决方案_javascript技巧

解决方案1: 调用windows 的shell,但会有安全问题. * browseFolder.js * 该文件定义了BrowseFolder()函数,它将提供一个文件夹选择对话框 * 以供用户实现对系统文件夹选择的功能 * 文件夹选择对话框起始目录由 * Shell.BrowseForFolder(WINDOW_HANDLE, Message, OPTIONS, strPath)函数 * 的strPath参数设置 * 例如:0x11--我的电脑 * 0 --桌面 * "c:\\"--

将input file的选择的文件清空的两种解决方案_javascript技巧

上传文件时,选择了文件后想清空文件路径,搜索了一下,用两种方法解决 复制代码 代码如下: <input type="file" id="fileupload" name="file" /> 第一种: 复制代码 代码如下: var obj = document.getElementById('fileupload') ; obj.select(); document.selection.clear(); 第二种: 复制代码 代码如下:

IE中getElementsByName()对有些元素无效的解决方案_javascript技巧

复制代码 代码如下: document.getElementsByName('someName') 返回一个节点列表(数组) 注意:在IE下有些节点是没有name 属性的,就是用document.getElementsByName获取不到的.只有下面的tag有name属性: A, APPLET, attribute, BUTTON, EMBED, FORM, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT t

qt-Qt中,会同时触发两个事件吗?

问题描述 Qt中,会同时触发两个事件吗? 比如说,我改变一个窗体的大小,那么我是不是会触发 这个窗体部件的 changed信号 和 重绘事件? 解决方案 不会同时,会有先后顺序.但是可以产生连锁反应.一个极端的例子是,在change事件中更新自己,导致反复递归调用,堆栈溢出.这些都要注意. 解决方案二: 1.这个问题应该早就有人回答了,不用再自己劳心劳力提问啦,百度下就能找到的:2.重绘事件在这里,重写virtual void paintEvent(QPaintEvent *);可以在这里捕获到

鼠标经过子元素触发mouseout,mouseover事件的解决方案_javascript技巧

我想实现的目标:当鼠标进入黑色框时,橙色框执行淡入动画:当黑色框范围移动的时候(即使经过粉色框,动画仍然不被触发):当鼠标移出的时候,橙色方块消失. 遇到的问题阐述:当鼠标移入黑色框的时候,橙色框执行淡入动画,但是当鼠标从黑色框经过粉色框的时候,橙色框就消失了,然后又执行一遍淡入动画.当鼠标从粉色框移出到黑色框的时候,橙色框的淡入动画又被执行.这不是我想要的. 初期代码: <!DOCTYPE html> <html> <head> <script src=&quo

DOM中事件处理概览与原理的全面解析_javascript技巧

事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信,DOM支持大量的事件:  本文通过这几点向大家详细解析事件处理的基本原理:事件类型.事件目标.事件处理程序.事件对象.事件传播 最后再向大家介绍Event对象:  一.事件类型(event type):是一个用来说明发生了什么类型事件的全小写的字符串,如'mouseover' 传统事件类型:表单事件,Window事件,鼠标事件,键盘事件,DOM事件, HTML5事件,触摸屏和移动设备事件等  二.事件目标(event target

JavaScript与Image加载事件(onload)、加载状态(complete)_javascript技巧

昨天用jQuery插件aeImageResize,发现它更有优势:每张图片加载完后,会马上进行等比缩放. 这归于图片对象Image的加载事件onload的功劳. 查看插件的源码,发现它也依赖图片对象的complete属性和onload事件,并且特别把IE6区分对待,到底IE6在图片加载对象上,与其它浏览器有什么不同呢? 看下文: 通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识. 看个例子: 复制代码 代码如下: <input type=&qu