首页 > 代码库 > 模拟tap事件和longTap事件
模拟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
模拟tap事件和longTap事件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。