Touch事件
最基本的touch事件包括4个事件:
touchstart:
当在屏幕上按下手指时触发
touchmove:
当在屏幕上移动手指时触发
touchend:
当在屏幕上抬起手指时触发
touchcancel:
当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。
与移动端相关的interface主要有三个:
TouchEvent:
表示触摸状态发生改变时触发的event
Touch:
表示用户和触屏设备之间接触时单独的交互点(a single point of contact)
TouchList:
表示一组touches。当发生多点触摸的时候才用的到。
touchstart:
当用户手指触摸到的触摸屏的时候触发。事件对象的 target 就是touch 发生位置的那个元素。
touchmove:
当用户在触摸屏上移动触点(手指)的时候,触发这个事件。一定是先要触发touchstart事件,再有可能触发 touchmove 事件。
touchmove 事件的target 与最先触发的 touchstart 的 target 保持一致。touchmove事件和鼠标的mousemove事件一样都会多次重复调用,所以,事件处理时不能有太多耗时操作。不同的设备,移动同样的距离 touchmove 事件的触发频率是不同的。
有一点需要注意:即使手指移出了 原来的target 元素,则 touchmove 仍然会被一直触发,而且 target 仍然是原来的 target 元素。
touchend:
当用户的手指抬起的时候,会触发 touchend 事件。如何用户的手指从触屏设备的边缘移出了触屏设备,也会触发 touchend 事件。
touchend 事件的 target 也是与 touchstart 的 target 一致,即使已经移出了元素。
touchcancel:
当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):
由于某个事件取消了触摸:例如触摸过程被一个模态的弹出框打断。
触点离开了文档窗口,而进入了浏览器的界面元素、插件或者其他外部内容区域。
当用户产生的触点个数超过了设备支持的个数,从而导致 TouchList 中最早的 Touch对象被取消
touchcancel 事件一般用于保存现场数据。比如:正在玩游戏,如果发生了 touchcancel 事件,则应该把游戏当前状态相关的一些数据保存起来。
TouchList详解
一个TouchList代表一个触摸屏幕上所有触点的列表。
举例来讲, 如果一个用户用三根手指接触屏幕(或者触控板), 与之相关的TouchList 对于每根手指都会生成一个 Touch对象, 共计 3 个.
只读属性:length:
返回这个TouchList中Touch对的个数。(就是有几个手指接触到了屏幕)
方法:identifiedTouch()
返回值是在TouchList中的第 1 个 Touch 对象,已经被标记为过时,虽然有的浏览器还可以使用,但是不建议使用。
方法:item(index)
返回TouchList中指定索引的Touch对象。
changedTouches:(只读)
这个 TouchList对象列出了和这个触摸事件对应的那些发生了变化的 Touch 对象。
对于 touchstart 事件, 这个 TouchList 对象列出在此次事件中新增加的触点。
对于 touchmove 事件,列出和上一次事件相比较,发生了变化的触点。
对于 touchend 列出离开触摸平面的触点(这些触点对应已经不接触触摸平面的手指)
targetTouches:(只读)
这个TouchList列出了那些 touchstart发生在这个元素,并且还没有离开 touch surface 的touch point(手指)。是touches的一个严格子集。
touches`:(只读)
这个 TouchList 列出了事件触发时: touch suface上所有的 touch point。
identifier:
表示每 1 个 Touch 对象 的独一无二的 identifier。有了这个 identifier 可以确保你总能追踪到这个 Touch对象。
screenX:
触摸点相对于屏幕左边缘的 x 坐标。
screenY:
触摸点相对于屏幕上边缘的 y 坐标。
clientX:
触摸点相对于浏览器的 viewport左边缘的 x 坐标。不会包括左边的滚动距离。
clientY:
触摸点相对于浏览器的 viewport上边缘的 y 坐标。不会包括上边的滚动距离。
pageX:
触摸点相对于 document的左边缘的 x 坐标。 与 clientX 不同的是,他包括左边滚动的距离,如果有的话。
pageY:
触摸点相对于 document的左边缘的 y 坐标。 与 clientY 不同的是,他包括上边滚动的距离,如果有的话。
target:
总是表示 手指最开始放在触摸设备上的触发点所在位置的 element。 即使已经移出了元素甚至移出了document, 他表示的element仍然不变
封装移动端事件
(function (window){ //传入window,提高变量的查找效率
function myQuery(selector){ //这个函数就是对外提供的接口。
//调用这个函数的原型对象上的_init方法,并返回
return myQuery.prototype._init(selector);
}
myQuery.prototype = {
/*初始化方法,获取当前query对象的方法*/
_init: function (selector){
if (typeof selector == "string"){
//把查找到的元素存入到这个原型对象上。
this.ele = window.document.querySelector(selector);
//返回值其实就是原型对象。
return this;
}
},
/*单击事件:
* 为了规避click的300ms的延迟,自定义一个单击事件
* 触发时间:
* 当抬起手指的时候触发
* 需要判断手指落下和手指抬起的事件间隔,如果小于500ms表示单击时间。
*
* 如果是大于等于500ms,算是长按时间
* */
tap: function (handler){
this.ele.addEventListener("touchstart", touchFn);
this.ele.addEventListener("touchend", touchFn);
var startTime,
endTime;
function touchFn(e){
e.preventDefault()
switch (e.type){
case "touchstart":
startTime = new Date().getTime();
break;
case "touchend":
endTime = new Date().getTime();
if (endTime - startTime < 500){
handler.call(this, e);
}
break;
}
}
},
/**
* 长按
* @param handler
*/
longTag: function (handler){
this.ele.addEventListener("touchstart", touchFn);
this.ele.addEventListener("touchmove", touchFn);
this.ele.addEventListener("touchend", touchFn);
var timerId;
function touchFn(e){
switch (e.type){
case "touchstart" : //500ms之后执行
timerId = setTimeout(function (){
handler.call(this, e);
}, 500)
break;
case "touchmove" :
//如果中间有移动也清除定时器
clearTimeout(timerId)
break;
case "touchend" :
//如果在500ms之内抬起了手指,则需要定时器
clearTimeout(timerId);
break;
}
}
},
/**
* 左侧滑动。
记录手指按下的左边,在离开的时候计算 deltaX是否满足左滑的条件
*
*/
slideLeft: function (handler){
this.ele.addEventListener("touchstart", touchFn);
this.ele.addEventListener("touchend", touchFn);
var startX, startY, endX, endY;
function touchFn(e){
e.preventDefault();
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方向的移动,并且x方向的移动大于25个像素,表示在向左侧滑动
if (Math.abs(endX - startX) >= Math.abs(endY - startY) && startX - endX >= 25){
handler.call(this, e);
}
break;
}
}
},
/**
* 右侧滑动。
*
*/
rightLeft: function (e){
//TODO:
}
}
window.$ = window.myQuery = myQuery;
})(window);
$("div").tap(function (e){
console.log("单击事件")
})
$("div").longTag(function (){
console.log("长按事件");
})
$("div").slideLeft(function (e){
console.log(this);
this.innerHTML = "左侧滑动了....."
})