vue 多点触控手势_移动端手势事件（多指操作）

在移动端开发中，现有的手势事件只有IOS上的浏览器支持，因此对其他设备上的浏览器手势事件我们必须在移动端的touchstart、toucmove、touchend事件上进行改造升级，下面就介绍下升级改造的移动端的手势事件。

移动端触摸事件(基础事件)

touchstart— 触摸开始

touchmove— 触摸移动

touchend— 触摸结束

touchcancel— 触摸中断(在触摸过程中被打断，如弹框)

box.addEventListener('touchmove',function (event) {

console.log('触摸移动');

}

touchEvent对象

touches—触发事件时屏幕上的触点个数

targetTouches—触发事件时事件元素上的触点个数

changedTouches—触发事件发生改变的触点个数

target —事件元素

stopPropagation() —阻止事件冒泡

preventDefault() —阻止默认行为

touchlist对象

touchEvent对象的集合，类数组对象;

targetTouches、touches、changedTouches属性返回的都是touchlist对象

touch对象

clientX/clientY—触点在视口上的位置

pageX/pageY—触点在页面上的位置

screenX/screenY—触点在屏幕上的位置

box.addEventListener('touchstart',function (event) {

console.log(event.touches); //一个手指触摸时输出 Touchlist{0:Touch,length:1}

var startX = event.touches[0].clientX; //触点在视口上的位置

}

手势事件

IOS的手势事件

1.1 事件

gesturestart—手势开始，手指触碰当前元素，屏幕上有两个或者两个以上的手指

gesturechange—手势变化，手指触碰当前元素，屏幕上有两个或者两个以上的手指位置在发生移动

<