在移动端开发中，现有的手势事件只有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—手势变化，手指触碰当前元素，屏幕上有两个或者两个以上的手指位置在发生移动

gestureend—手势结束，在gesturestart后, 屏幕上只剩下两根以下(不包括两根)的手指

1.2 touchEvent 新增的属性

scale 触点的距离与触点初始距离的比例

rotation 触点的角度差与初始角度差的差

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

box.innerHTML = 'rotation : '+event.rotation + '
';

box.innerHTML += 'scale : '+event.scale + '
';

});

移动端手势事件(多指事件)

//封装 gestrue.js插件

(function (w) {

/**

* 用于给元素监听手势事件

* @param node 要监听的元素

* @param callback 对象，对象有三个函数 start、change、end

*/

function gesture(node, callback) {

//手势开始

// 当开始触摸元素的时候，判断屏幕上手指个数 >= 2

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

if (event.touches.length >= 2) {

//标记已经触发了手势开始

node.isGestureStart = true;

//计算一下两个触点的初始距离

this.startDst = getDst(event.touches[0], event.touches[1]);

//计算一下两个触点的初始角度

this.startDeg = getDeg(event.touches[0], event.touches[1]);

// 调用回调函数

if (callback && typeof(callback['start']) === 'function') {

callback['start']();

}

}

});

// 手势移动

// 当有手指移动的时候，判断屏幕上手指的个数 >= 2

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

if (event.touches.length >= 2) {

// 计算当前两个触点的距离

var currentDst = getDst(event.touches[0], event.touches[1]);

// 计算书两个触点的当前的夹角角度

var currentDeg = getDeg(event.touches[0], event.touches[1]);

// 计算当前两个触点的距离 和 两个触点的初始距离 比例

event.scale = currentDst / this.startDst;

// 计算两个触点，夹角的变化

event.rotation = currentDeg - this.startDeg;

//调用回调函数

if (callback && typeof(callback['change']) === 'function') {

callback['change'](event);

}

}

});

// 手势结束

// 触发过手势开始并且有触摸结束的时候判断屏幕上手指数量 < 2

node.addEventListener('touchend', function(event) {

if (node.isGestureStart && event.touches.length < 2) {

//重置标记

node.isGestureStart = false;

//调用回调函数

if (callback && typeof(callback['end']) === 'function') {

callback['end']();

}

}

});

/**

* 计算两个触点的位置

* @param touch1 第一个触点

* @param touch2 第二个触点

*/

function getDst(touch1, touch2) {

//计算两个直角边的长度

var x = touch2.clientX - touch1.clientX; //水平方向的距离

var y = touch2.clientY - touch1.clientY; //垂直方向的距离

//利用勾股定理，计算两个触点的距离(斜边的长度)

var z = Math.sqrt(x*x + y*y);

// 返回结果

return z;

}

/**

* 计算两个触点的夹角(水平辅助线)的角度

* @param touch1 第一个触点

* @param touch2 第二个触点

*/

function getDeg(touch1, touch2) {

//计算两个触点的距离，两个直角边长度

var x = touch2.clientX - touch1.clientX; //临边

var y = touch2.clientY - touch1.clientY; //对边

//根据两个直角边比例 tan，计算角度

var angle = Math.atan2(y, x); //是个弧度

//根据弧度计算角度

var deg = angle / Math.PI * 180;

//返回角度

return deg;

}

}

//暴露

w.gesture = gesture;

})(window);

使用案例-实现元素缩放及旋转

元素缩放及旋转

* {

margin:0;

padding:0;

}

html,body,#app {

width: 100%;

height: 100%;

overflow: hidden;

}

#box {

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

width: 150px;

height: 150px;

background-color: #f90;

}

**transformcss.js代码可查看笔者的'transform函数'文章**

(function () {

//获取元素

var app = document.querySelector('#app');

var box = document.querySelector('#box');

//阻止浏览器默认行为

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

event.preventDefault();

});

gesture(box, {

start: function(){

//记录开始手势的时候，此时元素的缩放比例

box.startScale = transformCss(box, 'scale'); //默认为1

//计算开始手势的时候，此时元素的初始旋转角度

box.startRotate = transformCss(box, 'rotate'); //默认为0

},

change: function(event){

//实现缩放

transformCss(box, 'scale', box.startScale * event.scale);

//实现旋转

transformCss(box, 'rotate', box.startRotate + event.rotation)

}

});

})();

说明：笔者只是个在前端道路上默默摸索的初学者，若本文涉及错误请及时给予纠正，如果本文对您有帮助的话，点击铭哥哥网址 http://learn.fuming.site/ 学习更多！

作者：捕猹少年闰土