移动端模拟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

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

  1. 移动端为何不使用click而模拟tap事件及解决方案

    移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...

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

    前提: 在我们应用程序或者在写Android自己主动化測试时候经常会须要模拟实体按键,来给我们做測试用.这也是我要整理的目的. 基本的涉及的是Linux Input Event事件. 下面的样例基于A ...

  3. 移动端 之 触摸事件、Tap事件和swipe事件

    触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触 ...

  4. jquery input 下拉框(模拟select控件)焦点事件

    本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...

  5. javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  6. 背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件

    [源码下载] 背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件 作者: ...

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

    让我万万没想到的是,原来<JavaScript高级程序设计(第3版)>里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法. 模拟鼠标事件MDN上已经说得很清楚,尽管为了保 ...

  8. 移动端tap或touch类型事件的点透问题认识

    1.什么是点透? 举例说明:下图B元素是黄色方块,B元素中包含了C元素,C元素是一个a链接,本身自带click事件按,然后又一个半透明的粉色元素A遮盖在B元素上(看图中A元素是覆盖在B元素上的,不然B ...

  9. 手持设备点击响应速度,鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

随机推荐

  1. UVA 246 10-20-30 10-20-30游戏 模拟+STL双端队列deque

    Input Each input set consists of a sequence of 52 integers separated by spaces and/or ends of line. ...

  2. 关于java字符串常量池

    今天发现一个好玩的东西 public static void main(String[] args)    {        String str1 = new StringBuilder(" ...

  3. 用简单的语言描述C++ 是什么?

    用简单的语言描述C++ 是什么? 答:C++是在C语言的基础上开发的一种面向对象编程语言,应用广泛.C++支持多种编程范式 --面向对象编程.泛型编程和过程化编程. 其编程领域众广,常用于系统开发,引 ...

  4. Dojo的declare接口

    declare(classname,[],{}) declare的第一个参数是可选的,代表类的名称 declare的第二个参数代表类的继承关系,比如继承哪一个父类,可以看到:第二个参数是一个数组,所以 ...

  5. Js笔记 14

      <script> // <!-- 课 对象   // //对象的创建方法 // 1.var obj = {} plainobject 对象字面量 对象直接量 // 2.构造函数 ...

  6. [BZOJ] 1907: 树的路径覆盖

    一个点必然被路径覆盖,根据是否为路径的端点分类 \(f[x][0]\)表示以\(x\)为根的子树,\(x\)不为端点的最小路径覆盖数 \(f[x][1]\)表示以\(x\)为根的子树,\(x\)为一条 ...

  7. C#基础-数组

    数组定义 定义数组并赋值 int[] scores = { 45, 56, 78, 98, 100 }; //在定义数组时赋值 for(int i = 0; i < scores.Length; ...

  8. Pycharm安装类库

    比如安装requests 打开settings,选择Project 下面的Project Interpreter,点击pip,在弹出窗口里输入requests然后点击install 即可!

  9. Goroutine 中执行匿名函数 坑

    //相对应for 循环 goroutine跑到慢 所以这里很大概率只会打印最后一条数据 func goRun() { values := []int{1, 2, 3} for _, v := rang ...

  10. Nordic Collegiate Programming Contest 2015​ B. Bell Ringing

    Method ringing is used to ring bells in churches, particularly in England. Suppose there are 6 bells ...