模拟tap事件和longTap事件

移动端模拟tap和longTap事件,基本原理就是在touchstart和touchend事件中,计算触摸的位移和时间差,位移在一定范围内(轻微滑动),时间小于150ms为tap事件,时间大于300ms为longTap事件。

(function(){
    var TOUCHSTART, TOUCHEND;
    if (typeof(window.ontouchstart) != ‘undefined‘) {
        TOUCHSTART = ‘touchstart‘;
        TOUCHEND = ‘touchend‘;
        TOUCHMOVE=‘touchmove‘;

    } else if (typeof(window.onmspointerdown) != ‘undefined‘) {
        TOUCHSTART = ‘MSPointerDown‘;
        TOUCHEND = ‘MSPointerUp‘;
        TOUCHMOVE=‘MSPointerMove‘;
    } else {
        TOUCHSTART = ‘mousedown‘;
        TOUCHEND = ‘mouseup‘;
        TOUCHMOVE = ‘mousemove‘;
    }
    function tap(node,callback,scope) {
        var x,y,startTime=0,endTime=0,in_dis=false,bMoved=false;
        node.addEventListener(‘touchstart‘, function(e) {
            x = e.touches[0].pageX;
            y = e.touches[0].pageY;
            startTime= +new Date();
        });
        //完全不滑动
        // node.addEventListener(‘touchmove‘,function(e){
        //     bMoved = true;
        // });
        node.addEventListener(‘touchend‘, function(e) {
            e.stopPropagation();
            e.preventDefault();
            var bDisabled = hasClass(node,‘disable‘) || hasClass(node,‘disabled‘) || node.disabled;
            if(!bDisabled){
                var curx = e.changedTouches[0].pageX;
                var cury = e.changedTouches[0].pageY;
                //轻微滑动
                if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
                    in_dis=true;
                }else{
                    in_dis=false;
                }
                //or 完全不滑动
                //in_dis = !bMoved;
                endTime= +new Date();
                if (endTime - startTime < 150 && in_dis) {
                    callback.apply(scope, arguments);
                }
            }
            /*充值参数*/
            startTime = 0;
            in_dis = false;
            //bMoved = false;
        });
    }

    function longTap(node,callback,scope) {
        var x,y,startTime=0,endTime=0,in_dis=false;
        node.addEventListener(TOUCHSTART, function(e) {
            x = e.touches[0].pageX;
            y = e.touches[0].pageY;
            startTime = +new Date();
        });
        node.addEventListener(TOUCHEND, function(e) {
            e.stopPropagation();
            e.preventDefault();
            var bDisabled = hasClass(node,‘disable‘) || hasClass(node,‘disabled‘) || node.disabled;
            if(!bDisabled){
                var curx = e.changedTouches[0].pageX;
                var cury = e.changedTouches[0].pageY;
                if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
                    in_dis=true;
                }else{
                    in_dis=false;
                }
                endTime = +new Date();
                if (endTime - startTime > 300 && in_dis) {
                    callback.apply(scope, arguments);
                }
            }
            /*重置参数*/
            startTime = 0;
            in_dis = false;
        });
    }

    function hasClass(el, cls) {
        if (!el || !cls) return false;
        if (cls.indexOf(‘ ‘) != -1) throw new Error(‘className should not contain space.‘);
        if (el.classList) {
            return el.classList.contains(cls);
        } else {
            return (‘ ‘ + el.className + ‘ ‘).indexOf(‘ ‘ + cls + ‘ ‘) > -1;
        }
    }

    window.touch = {
        tap: tap,
        longTap: longTap
    }
});

参考:http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html

     https://segmentfault.com/a/1190000006109728

     http://www.cnblogs.com/199316xu/p/6479566.html

时间: 2025-01-11 09:26:16

模拟tap事件和longTap事件的相关文章

微信小程序-双击长按longtap事件与tap事件冲突的解决办法

对于微信事件,不多说,自己看文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html?t=20161122 效果 首先,注意一下微信小程序事件触发顺序     单击 touchstart → touchend → tap 双击 touchstart → touchend → tap → touchstart → touchend → tap 长按 touchstart → longtap → touche

Android(Linux)模拟按键、触摸屏等事件

前提: 在我们应用程序或者在写Android自动化测试时候常常会需要模拟实体按键,来给我们做测试用.这也是我要整理的目的.主要的涉及的是Linux Input Event事件.以下的例子基于Android 5.1(Linux-3.10). 一.利用getevent.sendevent模拟按键 (1)命令:getevent -t 结果: ... add device 6: /dev/input/event9 bus: 0000 vendor 0000 product 0000 version 00

js原生创建模拟事件和自定义事件的方法

让我万万没想到的是,原来<JavaScript高级程序设计(第3版)>里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法. 1. 模拟鼠标事件 MDN上已经说得很清楚,尽管为了保持向后兼容MouseEvent.initMouseEvent()仍然可用,但是呢,我们应该使用MouseEvent().我们使用如下页面做测试 1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-CN"> 4

HttpWebRequest 模拟登录响应点击事件(开源自己用的HttpHelper类)

平时也经常采集网站数据,也做模拟登录,但一般都是html控件POST到页面登录:还没有遇到用户服务器控件button按钮点击事件登录的,今天像往常一样POST传递参数,但怎么都能登录不了:最后发现还有两个参数需要传,__EVENTVALIDATION和__VIEWSTATE 在传的过程中需要对参数值进行URL编码 System.Web.HttpUtility.UrlEncode(value) 模拟登录代码:在本地写的一个测试的网站来模拟登录,原理都一样: Request request = ne

JavaScript之jQuery-4 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)

一.jQuery 页面加载后执行 代码执行的时机选择 - $(document).ready()方法和 window.onload事件具有相似的功能,但是在执行时机方面是有区别的 - window.onload 事件是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行 - $(document).ready()方法注册的事件处理程序,在DOM完全加载后就可以调用 - 一般来讲, $(document).ready()的执行要优于window.onload事件 - 需要注意的是,

tap,touch,touchstart,事件与click事件的区别

根据源码所见, 移动端为了将将单击事件更加灵敏,所以现在的JQM,ST...框架都将JS单击事件封装成tap,或者touch或者touchstart事件, 其实现本质是将click触发多次,以打成移动端触屏灵敏的效果. 所以这里如果使用手机浏览器访问你的st,或者jqm项目,就得使用js修改成click事件,以防止单击多次触发的问题 tap,touch,touchstart,事件与click事件的区别

DevExpress.XtraNavBar.NavBarControl 模拟单击导航的选项事件

/// <summary> /// DevExpress.XtraNavBar.NavBarControl 模拟单击导航的选项事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void simpleButton1_Click(object sender, EventAr

如何解决 touchstart 事件与 click 事件的冲突

一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart 事件代替 click 事件. 为什么这样效果会更好呢?根据Google开发者文档中的描述: mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click e

小程序事件的介绍、事件对象、事件传值、事件冒泡和捕获

小程序在1.5版本以后,支持  bind:tap=“事件名称”  来绑定事件 catch:tap=“事件名称”    也可以用catchtap来绑定事件 还有一些几乎所有组件都有的事件: touchstart:手指开始触摸 touchmove:手指移动 touchcancel:手指触摸被打断,比如说电话来了 touchend:手指停止触摸 tap:手指触摸后马上离开  相当于js中的click点击事件 longpress:长按  且长按事件超过350毫秒 longtap:长按 超过350毫秒再离