-
移动端本身就有click事件,但是该事件在touch事件之后发生,延迟时间为300ms,影响用户体验
-
tap事件(不是移动端原生事件,通过touch相关事件衍生过来)
-
使用tap事件,响应的速度比click要快
-
fastclick.js可以提高移动端click响应速度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点触事件</title> <style type="text/css"> .box{ width:300px; height:300px; background-color: pink; } </style> </head> <body> <div class="box"></div> <script> window.onload = function(){ var bindTapEvent = function(dom, callback){ var isMove = false; //是否滑动 var startTime = 0; //点触开始时间 dom.addEventListener("touchstart", function(e){ startTime = Date.now(); }); dom.addEventListener("touchmove", function(e){ isMove = true; }); dom.addEventListener("touchend", function(e){ //时间小于150ms,并且没有滑动才认为是点触事件 if((Date.now() - startTime < 150) && !isMove){ callback && callback.call(this, e); } }); /*dom.addEventListener('click',function () { //console.log('click'); });*/ } bindTapEvent(document.querySelector(".box"), function(e){ console.log("点触"); console.log(this); console.log(e); }); } </script> </body> </html>
4. js移动端点触(tap)事件
最新推荐文章于 2024-03-14 11:54:14 发布