锐客网

  1. 首页 > it技术 > >

TouchEvent相关的对象以及属性

# TouchEvent相关对象以及属性
1.Touch 一个触点




{
screenX: 511,
screenY: 400,//触点相对于屏幕左边沿的Y坐标
clientX: 244.37899780273438,
clientY: 189.3820037841797,//相对于可视区域
pageX: 244.37,
pageY: 189.37,//相对于HTML文档顶部，当页面有滚动的时候与clientX=Y 不等
force: 1,//压力大小，是从0.0(没有压力)到1.0(最大压力)的浮点数
identifier: 1036403715,//一次触摸动作的唯一标识符
radiusX: 37.565673828125, //能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径
radiusY: 37.565673828125,
rotationAngle: 0,//它是这样一个角度值：由radiusX 和 radiusY 描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面
target: {} // 此次触摸事件的目标element
}
2.TouchList 由Touch对象组成的数组，可以通过event.touches取到，identifier就用来区分每个手指对应的Touch对象。
3.TouchEvent 就是用来描述手指触摸屏幕的状态变化事件，除了一般DOM事件中event对像具备的属性，还有一些特有的属性。
4.touches 一个TouchList对象，包含当前所有接触屏幕的触点的Touch对象，不论 touchstart 事件从哪个elment上触发。
5.targetTouches 也是一个TouchList对象，指touchstart触发目标element触点的 Touch对象
6.changedTouches 也是一个 TouchList 对象，对于 touchstart 事件, 这个 TouchList 对象列出在此次事件中新增加的触点。对于 touchmove 事件，列出和上一次事件相比较，发生了变化的触点。对于 touchend ，列出离开触摸平面的触点（这些触点对应已经不接触触摸平面的手指）。
touches和targetTouches只存储接触屏幕的触点，要获取触点最后离开的状态要使用changedTouches。
7.对touch事件进行封装




(function () {
var coord={},
start={},
el;
document.addEventListener('touchstart', touchStart);
document.addEventListener('touchmove',touchMove);
document.addEventListener('touchend',touchEnd);
document.addEventListener('touchcanel',touchCancel);
function newEvent(type){
return new Event(type,{ bubbles: true,cancelable: true});
}
function touchCancel () {
coord = {}
}
function touchStart(e){
var c = e.touches[0];
start = {
x: c.clientX,
y: c.clientY,
time: Date.now()
【TouchEvent相关的对象以及属性】};
el= e.target;
el='tagName' in el ? el : el.parentNode;
}
function touchMove(e){
var t = e.touches[0];
coord = {
x: t.clientX - start.x,
y: t.clientY - start.y
}
}
function touchEnd(){
var touchTimes = Date.now() - start.time,
c = 250 > touchTimes && Math.abs(coord.x) > 20 || Math.abs(coord.x) > 80,
s = 250 > touchTimes && Math.abs(coord.y) > 20 || Math.abs(coord.y) > 80,
left = coord.x < 0,
top = coord.y < 0;
if (
250 > touchTimes
&&
(isNaN(coord.y) || Math.abs(coord.y)) < 12 && (isNaN(coord.x) || Math.abs(coord.x) < 12)
){
el.dispatchEvent(newEvent('tap'));
}else if(
750 < touchTimes
&&
(isNaN(coord.y) || Math.abs(coord.y)) < 12 && (isNaN(coord.x) || Math.abs(coord.x) < 12)
){
el.dispatchEvent(newEvent('longTap'));
}


c ? el.dispatchEvent(left ? newEvent('swipeLeft') : newEvent('swipeRight')) : s && el.dispatchEvent(top ? newEvent('swipeUp') : newEvent('swipeDown'));
coord={};
}
}());

    推荐阅读


    上一篇：编程规范

    下一篇：高度塌陷