移动端事件
文章目录
什么是touch事件
- 随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开那些触摸事件. touch事件多用于移动端,可响应用户手指(或触控笔)对屏幕或者触控板操作,给基于触控操作,给基于触控的用户界面提供可靠的支持
移动端操作和pc端操作的区别
pc端事件操作
- 鼠标按下 mousedown
- 鼠标移动 mousemove
- 鼠标抬起 mouseup
移动端事件操作
- 手指按下 touchstart
- 手指移动 touchmove
- 手指抬起 touchend
移动端的四个基本事件
- touchstart 手指接触到屏幕就触发
- touchmove 手指在屏幕上滑动持续触发
- touchend 手指离开屏幕时触发
- touchcancel 当前正在进行的事件被一些外来因素打断的时候,会触发;
移动端事件对象存储信息
- touches
- targetTouches
- changedTouches
手指信息存放
-
e.touches 所有的手指信息
-
e.touches[0] 第一个手指的信息
-
targetTouches 目标元素的信息
-
changedTouches 手指离开时候的信息
-
screenX/screenY 屏幕
-
pageX/pageY 页面
-
clientX/clientY 视口
多点触摸
移动端300ms的故事
- tap事件是zepto里面的点击事件
- click有300ms延时 这延时是判断单击还是双击
- 移动web页面上的click事件响应都要慢上300ms。原因是在开始的时候移动设备访问的web页面都是PC上的页面,在默认的viewport(980px)的页面往往都是需要“双击”或“捏开”放大页面来看清页面。而正是为了确认用户是“双击”还是“单击”,safari浏览器需要个300ms的延迟来判断。而后来的iPhone也一直延用这样的设计,而借鉴成功iPhone的android也延用这样的设计。于是300ms就成为了一道规范。
如何解决300ms延迟的问题?
- 使用Tab事件代替click事件,其中的原理是:在touchstart、touchend时记录时间、手指的位置,在touchend时进行比较,如果手指位置为同一位置(或允许移动一个非常小的位移值)且时间间隔较短(一般认为是150ms),且过程中未曾触发过touchmove,即可认为触发了手持设备上的“click”,一般称它为“tap”
简单移动端事件的封装
- 为什么要封装事件,因为仅有的四个事件不符合人类的操作习惯,需要封装
- 封装轻击(tap)
// 移动端的点击事件会有300ms的延迟,(这300ms的延时是来判断是单击还是双击) 优化
// 触发点击事件是
// 先触发了touch事件 如果是点击事件 没有touchmove事件
// 触屏开始 和 结束 的时间差 要小于 150ms
/*
* 参数说明
* obj:绑定点击事件的对象
* callback: 点击事件触发后 要执行的代码
* */
/* 全局污染 */
// 命名空间 避免全局污染
var myTap={
tap:function(obj,callback){
if(typeof obj=="object"){
//定义变量记录数据
var startTime=0;
var isMove=false;
//触屏开始
obj.addEventListener('touchstart',function(){
startTime=Date.now(); //时间戳
});
//触屏移动
obj.addEventListener('touchmove',function(){
isMove=true;
});
//触屏结束
obj.addEventListener('touchend',function(e){
//判断 没有移动过 时间小于150ms 为点击事件
if(!isMove&&Date.now()-startTime<150){
callback&&callback(e);
}
//数据重置
isMove=false;
startTime=0;
});
}
}
};
- 封装滑动事件(element,direction,callback) …
var swipe = function(el,direction,callback){
var startPoint=null,
endPoint=null,
distance = 30;
el.addEventListener("touchstart",function(e){
startPoint={
x:e.touches[0].clientX,
y:e.touches[0].clientY
}
})
el.addEventListener("touchmove",function(e){
endPoint={
x:e.touches[0].clientX,
y:e.touches[0].clientY
}
})
el.addEventListener("touchend",function(e){
if(endPoint && dir(startPoint,endPoint) === direction){
console.log(1)
callback && callback()
}
startPoint=null,
endPoint=null
})
function dir(start,end){
var diffX = end.x-start.x,
diffY = end.y-start.y,
absX = Math.abs(diffX),
absY = Math.abs(diffY),
str = "";
console.log(diffX,diffY,absX,absY)
if(absX>distance || absY>distance){
if(absX>absY){
str = diffX>0 ? "left" : "right"
}else if(absY>absX){
str = diffY>0 ? "bottom" : "top"
}
}
// console.log(str)
return str;
}
}