事件-移动端
单手指事件:
- touchstart:手指按在屏幕上
- touchmove:手指在屏幕上移动
- touchend:手指离开屏幕
- touchcancle :手指操作取消(一般都是意外情况导致操作取消)
多手指事件:
- getsturestart:多手指按下
- getsturechange:多手指位置改变
- getstureend :手指离开
- getsturecancel:多手指操作取消(一般都是意外情况导致操作取消)
click事件
PC:click为点击,快速点击两次,则触发两次click事件。
移动端:click为单击,快速点击两次(手指快速的点击两次触发的是doubleclick事件,而不是click事件)。
在移动端使用click的时候会有300ms的延迟(因为第一次操作的时候,浏览器会等待300ms看是否由下一次操作,300ms内没有下一次的操作,属于单击,由下一次操作属于双击)
如果你已经使用了click,如何解决300ms的延迟:引入fastClick.min.js
自己写的myTap事件来实现click事件,从而解决了300ms的延迟问题实现代码如下:
HTMLElement.prototype.myTap=HTMLElement.prototype.myTap||function (callBack) {
var myTapStart=0,
myTapEnd=0,
timeTap=300;
this.addEventListener("touchstart",function (e) {
//获取touchstart事件的时间戳
myTapStart=e.timeStamp;
//changedTouchs是事件对象TouchEvent上面的属性,上面存储了一个当前操作的信息。
let point=e.changedTouches[0];
this.strX=point.pageX;
this.strY=point.pageY;
this.isMove=false;
},false);
this.addEventListener("touchmove",function (e) {
let point=e.changedTouches[0];
let changeX=point.pageX-this.strX;
let changeY=point.pageY-this.strY;
if(Math.abs(changeX)>10||Math.abs(changeY)>10){
this.isMove=true;
}
},false);
this.addEventListener("touchend",function (e) {
//获取touchend事件的时间戳
myTapEnd=e.timeStamp;
timeTap=myTapEnd-myTapStart;
if(!this.isMove&&timeTap<=300){
callBack();
}
},false);
};
var box=document.querySelector("#box");
box.myTap(function () {
console.log("这个是我封装好的单击事件myTap");
});