[前端] touch事件

jquery touch事件解析及方向判断

 

介绍：

touch事件在jQuery的高版本 用on来实现 $('div').on('touchstart', function(e) { …… }); 


touchstart  触摸开始的时候触发
touchmove   手指在屏幕上滑动的时候触发
touchend    触摸结束的时候触发


touches 当前位于屏幕上的所有手指列表（返回的是一个数组）
targetTouches  位于当前DOM元素上所有的手指列表（返回的也是一个数组）
changedTouches 涉及当前事件手指的列表（发生变化的触点）
identifier     一个数值，唯一标识触摸会话（touch session）中的当前手指。一般从0开始的流水号
target  DOM元素，是动作所针对的目标

 

代码：

 

// 手指在Body中点击时的记录
var startX, startY;
$("body").on("touchstart", function(e) {
    startX = e.originalEvent.changedTouches[0].pageX;  // 记录 最初点击时第一个触摸点的x坐标
    startY = e.originalEvent.changedTouches[0].pageY;  // 记录 最初点击时第一个触摸点的y坐标
});

// 阻止touchmove时的body默认事件
$('body').on('touchmove', function(e) {
    e.preventDefault();
});

// 记录/操作 当手指离开的操作 $('body')在操作的时候换成具体的选择器如$('#box')
$("body").on("touchend", function(e) {
    var moveEndX = e.originalEvent.changedTouches[0].pageX;   //  手指离开时的x坐标
    var moveEndY = e.originalEvent.changedTouches[0].pageY;   //  手指离开时的y坐标
    var X = moveEndX - startX; // 离开时的x坐标 - 开始触摸的x坐标 = 横向偏移值
    var Y = moveEndY - startY; // 离开时的y坐标 - 开始触摸的y坐标 = 纵向偏移值

    if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {       // 从左到右
        alert("left 2 right");
    }
    else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {  // 从右到左
        alert("right 2 left");
    }
    else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {   // 从上到下
        alert("top 2 bottom");
    }
    else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {  // 从下到上
        alert("bottom 2 top");
    }
    else{
        alert("just touch");
    }
});

 

 

 

 

js使用touch事件

 

document.addEventListener("touchstart", function() {}, false);  // false- 默认。事件句柄在冒泡阶段执行

 

详细介绍（http://javascript.ruanyifeng.com/dom/event.html）

 

 

 

Touch对象

 

Touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。它有以下属性。

（1）identifier

identifier属性表示Touch实例的独一无二的识别符。它在整个触摸过程中保持不变。

var id = touchItem.identifier;

 

TouchList对象的identifiedTouch方法，可以根据这个属性，从一个集合里面取出对应的Touch对象。

（2）screenX，screenY，clientX，clientY，pageX，pageY

screenX属性和screenY属性，分别表示触摸点相对于屏幕左上角的横坐标和纵坐标，与页面是否滚动无关。

clientX属性和clientY属性，分别表示触摸点相对于浏览器视口左上角的横坐标和纵坐标，与页面是否滚动无关。

pageX属性和pageY属性，分别表示触摸点相对于当前页面左上角的横坐标和纵坐标，包含了页面滚动带来的位移。

（3）radiusX，radiusY，rotationAngle

radiusX属性和radiusY属性，分别返回触摸点周围受到影响的椭圆范围的X轴和Y轴，单位为像素。

rotationAngle属性表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间。

上面这三个属性共同定义了用户与屏幕接触的区域，对于描述手指这一类非精确的触摸，很有帮助。指尖接触屏幕，触摸范围会形成一个椭圆，这三个属性就用来描述这个椭圆区域。

（4）force

force属性返回一个0到1之间的数值，表示触摸压力。0代表没有压力，1代表硬件所能识别的最大压力。

（5）target

target属性返回一个Element节点，代表触摸发生的那个节点。

TouchList对象

TouchList对象是一个类似数组的对象，成员是与某个触摸事件相关的所有触摸点。比如，用户用三根手指触摸，产生的TouchList对象就有三个成员，每根手指对应一个Touch对象。

TouchList实例的length属性，返回TouchList对象的成员数量。

TouchList实例的identifiedTouch方法和item方法，分别使用id属性和索引值（从0开始）作为参数，取出指定的Touch对象。

TouchEvent对象

TouchEvent对象继承Event对象和UIEvent对象，表示触摸引发的事件。除了被继承的属性以外，它还有一些自己的属性。

（1）键盘相关属性

以下属性都为只读属性，返回一个布尔值，表示触摸的同时，是否按下某个键。

• altKey 是否按下alt键
• ctrlKey 是否按下ctrl键
• metaKey 是否按下meta键
• shiftKey 是否按下shift键

（2）changedTouches

changedTouches属性返回一个TouchList对象，包含了由当前触摸事件引发的所有Touch对象（即相关的触摸点）。

对于touchstart事件，它代表被激活的触摸点；对于touchmove事件，代表发生变化的触摸点；对于touchend事件，代表消失的触摸点（即不再被触碰的点）。

var touches = touchEvent.changedTouches;

 

（3）targetTouches

targetTouches属性返回一个TouchList对象，包含了触摸的目标Element节点内部，所有仍然处于活动状态的触摸点。

var touches = touchEvent.targetTouches;

 

（4）touches

touches属性返回一个TouchList对象，包含了所有仍然处于活动状态的触摸点。

var touches = touchEvent.touches;

 

触摸事件的种类

触摸引发的事件，有以下几类。可以通过TouchEvent.type属性，查看到底发生的是哪一种事件。

• touchstart：用户接触触摸屏时触发，它的target属性返回发生触摸的Element节点。

• touchend：用户不再接触触摸屏时（或者移出屏幕边缘时）触发，它的target属性与touchstart事件的target属性是一致的，它的changedTouches属性返回一个TouchList对象，包含所有不再触摸的触摸点（Touch对象）。

• touchmove：用户移动触摸点时触发，它的target属性与touchstart事件的target属性一致。如果触摸的半径、角度、力度发生变化，也会触发该事件。

• touchcancel：触摸点取消时触发，比如在触摸区域跳出一个情态窗口（modal window）、触摸点离开了文档区域（进入浏览器菜单栏区域）、用户放置更多的触摸点（自动取消早先的触摸点）。

下面是一个例子。

var el = document.getElementsByTagName("canvas")[0];
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchmove", handleMove, false);

function handleStart(evt) {
  // 阻止浏览器继续处理触摸事件，
  // 也阻止发出鼠标事件
  evt.preventDefault();
  var touches = evt.changedTouches;

  for (var i = 0; i < touches.length; i++) {
    console.log(touches[i].pageX, touches[i].pageY);
  }
}

function handleMove(evt) {
  evt.preventDefault();
  var touches = evt.changedTouches;

  for (var i = 0; i < touches.length; i++) {
    var id = touches[i].identifier;
    var touch = touches.identifiedTouch(id);
    console.log(touch.pageX, touch.pageY);
  }
}

 

欢迎关注技术开发分享录：http://fenxianglu.cn/