1. 移动端事件
- 首先，移动端不建议使用 click 事件
- 因为它有300毫秒的延迟，对用户体验不太友好
常用事件：touchstart()，touchend()，touchmove()
HTML文件
<!DOCTYPE html> <html lang="ZH-cn"> <head> <meta charset="utf-8"> <title>标题</title> <meta name="viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no"/> </head> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; } .con{ height: 300px; width: 200px; color: white; background: green; } </style> <body> <h1>移动端事件</h1> <button class="touchstart" id="touchstart" > 点击我 </button> <div class="con" id="con"> </div> </body> </html>
JS部分
function $my(id){ return document.getElementById(id); } let btn = $my("touchstart"); let con = $my("con"); // 一样的会触发，但不建议使用 // btn.addEventListener("click", function(){ // console.log("click"); // }) // 手指触摸事件 btn.addEventListener("touchstart", function(){ console.log("touchstart"); }) // 手指松开事件 btn.addEventListener("touchend", function(){ console.log("touchend"); }) // 手指移动事件 + 事件节流 let time = null; con.addEventListener("touchmove", function(){ if(!time){ time = setTimeout(()=>{ console.log("快乐的飞起"); time = null; },1000) } })
大家可以先试一下效果，复制代码即可大家可以先试一下效果，复制代码即可
2. 封装移动端自定义事件
- 众所周知：低版本安卓手机上是没有touch类事件的
- 所以我们只能自己封装
2.1 封装移动端单击与长按事件
(function(window){ // 对外开放的接口 function myMobile(selector){ return myMobile.prototype._init(selector); } myMobile.prototype = { _init: function(selector){ if(typeof selector === "string"){ this.ele = window.document.querySelector(selector); // this：原型对象 return this; } }, // 单击事件 tap: function(hanler){ this.ele.addEventListener("touchstart", tochFn); this.ele.addEventListener("touchend", tochFn); let startTime, endTime; function tochFn(e){ // e.preventDefault(); switch (e.type){ case "touchstart": startTime = new Date().getTime(); break; case "touchend": endTime = new Date().getTime(); // 200是一个阙值 if( endTime - startTime < 200){ hanler.call(this, e); } break; } } }, // 长按事件 longtap: function(hanler){ this.ele.addEventListener("touchstart", tochFn); this.ele.addEventListener("touchmove", tochFn); this.ele.addEventListener("touchend", tochFn); let timerId; function tochFn(e){ // e.preventDefault(); switch (e.type){ case "touchstart": timerId = setTimeout(function(){ hanler.call(this, e); },2000) break; case "touchmove": clearTimeout(timerId); break; case "touchend": clearTimeout(timerId) break; } } }, // 左侧滑动 } window.$ = window.myMobile = myMobile; })(window);
2.2 封装左侧滑动与右侧滑动
slideLeft: function (hanler){ this.ele.addEventListener("touchstart", touchFn); this.ele.addEventListener("touchend", touchFn); var startX, startY, endX, endY; function touchFn(e){ e.preventDefault(); // console.log(e.changedTouches); var firstTouch = e.changedTouches[0]; switch (e.type){ case "touchstart": startX = firstTouch.pageX; startY = firstTouch.pageY; break; case "touchend": endX = firstTouch.pageX; endY = firstTouch.pageY; // x方向移动的距离大于Y（定义为左滑操作）并且移动距离超过了25px if ( Math.abs(endX - startX) >= Math.abs(endY -startY) && startX - endX >= 25){ hanler.call(this, e) } break; } } }
3. FAQ
- 浏览器切换为手机模式下运行
- 或者真机调试都可以
