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

最新文章

  1. 通过squid 禁止访问/只允许访问指定 网址
  2. Twentydaysgone
  3. angularJs的ng-class切换class
  4. Hibernate报错解决Error parsing JNDI name [],Need to specify class name
  5. [drp 8]get和post的区别,以及乱码问题的解决
  6. [BZOJ 1218] [HNOI2003] 激光炸弹 【n logn 做法 - 扫描线 + 线段树】
  7. IOS Xmpp 创建固定房间
  8. volatile(C# 参考)
  9. UVa 11631 - Dark roads
  10. Struts2学习第一天——struts2基本流程与配置
  11. Regasm
  12. Linux下gdb的安装及使用入门
  13. Winform DevExpress控件库(二) 使用SplashScreenManager控件定制程序加载页面
  14. XML解析之sax解析案例(二)使用sax解析把 xml文档封装成对象
  15. PAT1042:Shuffling Machine
  16. C#WebApi 接口参数不再困惑:传参详解
  17. Python内置函数(36)——iter
  18. js中子页面父页面方法 变量相互调用(转)
  19. python安装selenium和下载浏览器驱动
  20. JavaEE 要懂的小事:一、图解Http协议

热门文章

  1. Dungeon Master的两种方法
  2. Django ORM models操作
  3. Ab initio methods|Evidence-based methods|maximum-likelihood|branch-site|H1|H0|GO|dS/dN ratio
  4. /^/m|/$/m|\b|\B|$&amp;|$`|$&#39;|变量捕获|()?|(?:pattern)|(?&lt;LABEL&gt;PATTERN)|$+{LABEL}|(|)|\g{LABEL}
  5. 解决cocos simpleAudioEngine播放mp3失败问题
  6. python爬虫基础17-抓包工具使用
  7. python操作Excel模块openpyxl
  8. 关于.ascx
  9. vijos--繁华的都市
  10. lwqq