H5 -触摸事件_h5 移动端 按下事件

1. touch事件

• touchstart事件：按下手指，触发
• touchmove事件：移动手指，触发（在这个事件发生期间，调用preventDefault()事件可以阻止滚动）
• touchend事件：移走手指，触发
• touchcancel事件：当系统停止跟踪触摸的时触发

2. touch事件包含下面三个用于跟踪触摸的属性+DOM属性

• touches：表示当前跟踪的触摸操作的touch对象的数组
• targetTouches：特定于事件目标的Touch对象的数组
• changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

3. touch对象的属性

• clientX：触摸目标在视口中的x坐标 　　clientY：触摸目标在视口中的y坐标
• pageX：触摸目标在页面中的x坐标 　　pageY：触摸目标在页面中的y坐标
• screenX：触摸目标在屏幕中的x坐标 　　screenY：触摸目标在屏幕中的y坐标
• identifier：标识触摸的唯一ID
• target：触摸的DOM节点目标

//手机触屏  上下左右
  var startx, starty, endx, endy;
window.addEventListener("touchstart",function(e){
	var touch =e.touches[0];//第一根手指
	    startx = touch.pageX;
        starty = touch.pageY;
})
window.addEventListener("touchmove",function(e){
	var touch =e.touches[0];//第一根手指
        endx = touch.pageX;
        endy = touch.pageY;
})
window.addEventListener("touchend",function(e){ //区分四个方向
        var clientx = endx - startx; 
        var clienty = endy - starty;
        if (Math.abs(clientx) > Math.abs(clienty) && clientx > 0) { return"right";}
        else if (Math.abs(clientx) > Math.abs(clienty) && clientx < 0) {return"left";}
        else if (Math.abs(clientx) < Math.abs(clienty) && clienty > 0) {return"down";}
        else if (Math.abs(clientx) < Math.abs(clienty) && clienty < 0) {return"up";}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20