移动端模拟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. UVA11478 Halum (差分约束)

    每次操作是独立的,而且顺序并不影响,作用在同一个结点上的d可以叠加,所以令x(u) = sigma(dui). 最后就是要确定所有的x(u). 因为m越大,满足条件的边就越少,二分答案m. 对于一条边 ...

  2. Android(java)学习笔记107:Relativelayout相对布局

    1. Relativelayout相对布局案例: 我们看看案例代码,自己心领神会: <?xml version="1.0" encoding="utf-8" ...

  3. iOS 微信和支付宝关于回调处理

    在支付这一块,发现讲支付集成的比较多,但是关于支付后回调处理的不多见,(当时因为这个问题懵逼了好久)就自己总结一下, 1.支付宝回调 支付宝的回调想对来说比较简单一些,因为支付宝的回调就在调起支付宝的 ...

  4. 【转】HTTP Live Streaming直播(iOS直播)技术分析与实现

    HTTP Live Streaming直播(iOS直播)技术分析与实现 不经意间发现,大半年没写博客了,自觉汗颜.实则2012后半年,家中的事一样接着一样发生,实在是没有时间.快过年了,总算忙里偷闲, ...

  5. 【转】ios -- ViewController跳转+传值(方式一)

    方式一:通过定义一个实体类传值 (从ViewController1 跳转至 ViewController2) 1.定义实体类NotificationEntity .h声明文件 #import < ...

  6. N17_判断树B是不是树A的子结构

    题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) package new_offer; /** * 输入两棵二叉树A,B,判断B是不是A的子结构.( ...

  7. 将一个double类型的小数,按照四舍五入保留两位小数.

    package come.one01; public class One02 { public static void main(String[] args) { double numa = 3.14 ...

  8. vs2015驱动开发中使用RtlStringCchPrintfW()报错

    法一: 在头顶添加一段代码 #pragam comment(lib,"xxxxxx.lib") 法二: 右击工程点属性,选择Linker下的Input,在依赖项后面写上$(DDK_ ...

  9. HTML5<section>元素

    HTML5<section>元素用来定义页面文档中的逻辑区域或内容的整合(section,区域),比如章节.页眉.页脚或文档中的其他部分. 根据W3C HTML5文档中:section里面 ...

  10. ARC中__weak;__strong;__unsafe_unretained;修饰词

    测试代码: // Human.h代码 @interface Human : NSObject @property (nonatomic, weak) Cat *pinkCat; @property ( ...