一个最小手势库的实现
众所周知，浏览器暴露了四个事件给开发者，touchstart touchmove touchend touchcancel，在这四个事件的回调函数可以拿到TouchEvent。
TouchEvent:
touches：当前位于屏幕上的所有手指动作的列表
targetTouches：位于当前 DOM 元素上的手指动作的列表
changedTouches：涉及当前事件的手指动作的列表
TouchEvent里可以拿到各个手指的坐标，那么可编程性就这么产生了。
Tap点按
移动端click有300毫秒延时，tap的本质其实就是touchend。但是要判断touchstart的手的坐标和touchend时候手的坐标x、y方向偏移要小于30。小于30才会去触发tap。
longTap长按
touchstart开启一个750毫秒的settimeout，如果750ms内有touchmove或者touchend都会清除掉该定时器。超过750ms没有touchmove或者touchend就会触发longTap
swipe划
这里需要注意，当touchstart的手的坐标和touchend时候手的坐标x、y方向偏移要大于30，判断swipe，小于30会判断tap。那么用户到底是从上到下，还是从下到上，或者从左到右、从右到左滑动呢？可以根据上面三个判断得出，具体的代码如下：
|
1
2
3
|
_swipeDirection: function (x1, x2, y1, y2) {
return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
}
|
pinch捏
这个手势是使用频率非常高的，如图像裁剪的时候放大或者缩小图片，就需要pinch。
如上图所示，两点之间的距离比值求pinch的scale。这个scale会挂载在event上，让用户反馈给dom的transform或者其他元素的scale属性。
rotate旋转
如上图所示，利用内积，可以求出两次手势状态之间的夹角θ。但是这里怎么求旋转方向呢？那么就要使用差乘（Vector Cross）。
利用cross结果的正负来判断旋转的方向。
cross本质其实是面积，可以看下面的推导：
所以，物理引擎里经常用cross来计算转动惯量，因为力矩其实要是力乘矩相当于面积：
总结
主要的一些事件触发原理已经在上面讲解，还有如multipointStart、doubleTap、singleTap、multipointEnd可以看源码，不到200行的代码应该很容易消化。trigger手势事件的同时，touchStart、touchMove、touchEnd和touchCancel同样也可以监听。
/**
* myHand.js
*/
"use strict";
(function(root, factory) {
if(typeof define === "function" && define.amd) { //AMD规范
define([], function() {
return factory(root);
});
} else {
root.myHand=root.Toucher = factory(root); //把他挂载到window对象上
}
}(window, function(root, undefined) {
if(!"ontouchstart" in window) {
return;
}
var _wrapped;
// 获取对象上的类名
function _typeOf(obj) {
return Object.prototype.toString.call(obj).toLowerCase().slice(8, -1);
}
// 获取当前时间距1970/1/1时间戳
function getTimeStr() {
return +(new Date());
}
// 获取位置信息
function getPosInfo(ev) {
var _touches = ev.touches;
if(!_touches || _touches.length === 0) {
return;
}
return {
pageX: ev.touches[0].pageX,
pageY: ev.touches[0].pageY,
clientX: ev.touches[0].clientX || 0,
clientY: ev.touches[0].clientY || 0
};
}
// 绑定事件
function bindEv(el, type, fn) {
if(el.addEventListener) {
el.addEventListener(type, fn, false);
} else {
el["on" + type] = fn;
}
}
// 解绑事件
function unBindEv(el, type, fn) {
if(el.removeEventListener) {
el.removeEventListener(type, fn, false);
} else {
el["on" + type] = fn;
}
}
// 获得滑动方向
function getDirection(startX, startY, endX, endY) {
var xRes = startX - endX;
var xResAbs = Math.abs(startX - endX);
var yRes = startY - endY;
var yResAbs = Math.abs(startY - endY);
var direction = "";
if(xResAbs >= yResAbs && xResAbs > 25) {
direction = (xRes > 0) ? "Right" : "Left";
} else if(yResAbs > xResAbs && yResAbs > 25) {
direction = (yRes > 0) ? "Down" : "Up";
}
return direction;
}
// 取得两点之间直线距离
function getDistance(startX, startY, endX, endY) {
return Math.sqrt(Math.pow((startX - endX), 2) + Math.pow((startY - endY), 2));
}
function getLength(pos) {
return Math.sqrt(Math.pow(pos.x, 2) + Math.pow(pos.y, 2));
}
function cross(v1, v2) {
return v1.x * v2.y - v2.x * v1.y;
}
// 取向量
function getVector(startX, startY, endX, endY) {
return(startX * endX) + (startY * endY);
}
// 获取角度 a*b=|a|*|b|*cos(deg); a*b=x1*x2+y1*y2
function getAngle(v1, v2) {
var mr = getLength(v1) * getLength(v2);
if(mr === 0) {
return 0
};
var r = getVector(v1.x, v1.y, v2.x, v2.y) / mr;
if(r > 1) {
r = 1;
}
return Math.acos(r);
}
// 获取旋转的角度,不是弧度
function getRotateAngle(v1, v2) {
var angle = getAngle(v1, v2);
if(cross(v1, v2) > 0) {
angle *= -1;
}
return angle * 180 / Math.PI;
}
// 包装一个新的事件对象
function wrapEvent(ev, obj) {
var res = {
touches: ev.touches,
type: ev.type
};
if(_typeOf(obj) === "object") {
for(var i in obj) {
res[i] = obj[i];
}
}
return res;
}
// 把伪数组转换成数组
function toArray(list) {
if(list && (typeof list === "object") && isFinite(list.length) && (list.length >= 0) && (list.length === Math.floor(list.length)) && list.length < 4294967296) {
return [].slice.call(list);
}
}
// 判断一个元素列表里面是否有多个元素
function isContain(collection, el) {
if(arguments.length === 2) {
return collection.some(function(elItem) {
return el.isEqualNode(elItem);
});
}
return false;
}
// 生成一个随机id
function uId() {
return Math.random().toString(16).slice(2);
}
// 事件模块
var Event = (function() {
var storeEvents = {};
return {
// add an event handle
add: function(type, el, handler) {
var selector = el,
len = arguments.length,
finalObject = {},
_type;
/**
* Event.add("swipe", function() {
* // ...
* });
*/
if(_typeOf(el) === "string") {
el = document.querySelectorAll(el);
}
if(len === 2 && _typeOf(el) === "function") {
finalObject = {
handler: el
};
} else if(len === 3 && el instanceof HTMLElement || el instanceof NodeList && _typeOf(handler) === "function") {
/**
* Event.add("swipe", "#div", function(ev) {
* // ...
* });
*/
_type = _typeOf(el);
finalObject = {
type: _type,
selector: selector,
el: _type === "nodelist" ? toArray(el) : el,
handler: handler
};
}
if(!storeEvents[type]) {
storeEvents[type] = [];
}
storeEvents[type].push(finalObject);
},
// remove an event handle
remove: function(type, selector) {
var len = arguments.length;
if(_typeOf(type) === "string" && _typeOf(storeEvents[type]) === "array" && storeEvents[type].length) {
if(len === 1) {
storeEvents[type] = [];
} else if(len === 2) {
storeEvents[type] = storeEvents[type].filter(function(item) {
return !(item.selector === selector || _typeOf(selector) !== "string" && item.selector.isEqualNode(selector));
});
}
}
},
// trigger an event handle
trigger: function(type, el, argument) {
var len = arguments.length;
/**
* Event.trigger("swipe", document.querySelector("#div"), {
* // ...
* });
*/
if(len === 3 && _typeOf(storeEvents[type]) === "array" && storeEvents[type].length) {
storeEvents[type].forEach(function(item) {
if(_typeOf(item.handler) === "function") {
if(item.type && item.el) {
argument.target = el;
if(item.type === "nodelist" && isContain(item.el, el)) {
item.handler(argument);
} else if(item.el.isEqualNode && item.el.isEqualNode(el)) {
item.handler(argument);
}
} else {
item.handler(argument);
}
}
});
}
}
};
})();
// 构造函数
function Toucher(selector) {
return new Toucher.fn.init(selector);
}
Toucher.fn = Toucher.prototype = {
// 修改原型构造器
constructor: Toucher,
// 初始化方法
init: function(selector) {
this.el = selector instanceof HTMLElement ? selector :
_typeOf(selector) === "string" ? document.querySelector(selector) : null;
if(_typeOf(this.el) === "null") { //如果没有匹配到
throw new Error("您必须指定一个特定的选择器或特定的DOM对象");
}
this.scale = 1;
this.pinchStartLen = null;
this.isDoubleTap = false;
this.triggedSwipeStart = false;
this.triggedLongTap = false;
this.delta = null;
this.last = null;
this.now = null;
this.tapTimeout = null;
this.singleTapTimeout = null;
this.longTapTimeout = null;
this.swipeTimeout = null;
this.startPos = {};
this.endPos = {};
this.preTapPosition = {};
this.cfg = {
doubleTapTime: 400,
longTapTime: 700
};
// 绑定4个事件
bindEv(this.el, "touchstart", this._start.bind(this));
bindEv(this.el, "touchmove", this._move.bind(this));
bindEv(this.el, "touchcancel", this._cancel.bind(this));
bindEv(this.el, "touchend", this._end.bind(this));
return this;
},
// 提供config方法进行配置
config: function(option) {
if(_typeOf(option) !== "object") {
throw new Error("option 必须是一个JSON的实例对象" + option.toString());
}
for(var i in option) {
this.cfg[i] = option[i];
}
return this;
},
// on方法绑定事件
/**
* var toucher = Toucher({...});
*
* toucher.on("swipe", function(ev) {
* // ...
* });
*
* // or
*
* toucher.on("tap", "#id", function(ev) {
* // ...
* });
*
* support events: singleTap,longTap,swipe,swipeStart,swipeEnd,swipeUp,swipeRight,swipeDown,swipeLeft,pinch,rotate
*
*/
on: function(type, el, callback) {
var len = arguments.length;
if(len === 2) {
Event.add(type, el);
} else {
Event.add(type, el, callback);
}
return this;
},
// off 解除绑定
/**
* var toucher = Toucher({...});
* toucher.off(type);
*
* // or
*
* toucher.off(type, selector);
*/
off: function(type, selector) {
Event.remove(type, selector);
return this;
},
// 手指刚触碰到屏幕
_start: function(ev) {
if(!ev.touches || ev.touches.length === 0) {
return;
}
var self = this;
var otherToucher, v,
preV = this.preV,
target = ev.target; //获取目标元素
self.now = getTimeStr(); //获取当前时间距1970/1/1时间戳
self.startPos = getPosInfo(ev); //获取点击的坐标位置信息
self.delta = self.now - (self.last || self.now); //计算时间间隔
self.triggedSwipeStart = false;
self.triggedLongTap = false;
// 快速双击
if(JSON.stringify(self.preTapPosition).length > 2 && self.delta < self.cfg.doubleTapTime && getDistance(self.preTapPosition.clientX, self.preTapPosition.clientY, self.startPos.clientX, self.startPos.clientY) < 25) {
//第一次点击保存了信息内容长度>2,双击时间间隔小于400,两次点击的两点之间直线距离小于半径25的圆圈内
self.isDoubleTap = true;
}
// 长按定时
self.longTapTimeout = setTimeout(function() {
_wrapped = {
el: self.el,
type: "longTap",
timeStr: getTimeStr(),
position: self.startPos
};
Event.trigger("longTap", target, _wrapped);
self.triggedLongTap = true;
}, self.cfg.longTapTime);
// 多个手指放到屏幕
if(ev.touches.length > 1) {
self._cancelLongTap();
otherToucher = ev.touches[1];
v = {
x: otherToucher.pageX - self.startPos.pageX,
y: otherToucher.pageY - self.startPos.pageY
};
this.preV = v;
self.pinchStartLen = getLength(v);
self.isDoubleTap = false;
}
self.last = self.now;
self.preTapPosition = self.startPos; //保存上一次点击的坐标位置信息
ev.preventDefault();
},
// 手指在屏幕上移动
_move: function(ev) {
if(!ev.touches || ev.touches.length === 0) {
return;
}
var v, otherToucher;
var self = this;
var len = ev.touches.length;
var posNow = getPosInfo(ev);
var preV = self.preV;
var currentX = posNow.pageX;
var currentY = posNow.pageY;
var target = ev.target;
// 手指移动取消长按事件和双击
self._cancelLongTap();
self.isDoubleTap = false;
// 一次按下抬起只触发一次swipeStart
if(!self.triggedSwipeStart) {
_wrapped = {
el: self.el,
type: "swipeStart",
timeStr: getTimeStr(),
position: posNow
};
Event.trigger("swipeStart", target, _wrapped);
self.triggedSwipeStart = true;
} else {
_wrapped = {
el: self.el,
type: "swipe",
timeStr: getTimeStr(),
position: posNow
};
Event.trigger("swipe", target, _wrapped);
}
if(len > 1) {
otherToucher = ev.touches[1];
v = {
x: otherToucher.pageX - currentX,
y: otherToucher.pageY - currentY
};
// 缩放
_wrapped = wrapEvent(ev, {
el: self.el,
type: "pinch",
scale: getLength(v) / this.pinchStartLen,
timeStr: getTimeStr(),
position: posNow
});
Event.trigger("pinch", target, _wrapped);
// 旋转
_wrapped = wrapEvent(ev, {
el: self.el,
type: "rotate",
angle: getRotateAngle(v, preV),
timeStr: getTimeStr(),
position: posNow
});
Event.trigger("rotate", target, _wrapped);
ev.preventDefault();
}
self.endPos = posNow;
},
// 触碰取消
_cancel: function(ev) {
clearTimeout(this.longTapTimeout);
clearTimeout(this.tapTimeout);
clearTimeout(this.swipeTimeout);
clearTimeout(self.singleTapTimeout);
},
// 手指从屏幕离开
_end: function(ev) {
if(!ev.changedTouches) {
return;
}
// 取消长按
this._cancelLongTap();
var self = this;
var direction = getDirection(self.endPos.clientX, self.endPos.clientY, self.startPos.clientX, self.startPos.clientY);
var callback, target = ev.target;
if(direction !== "") {
self.swipeTimeout = setTimeout(function() {
_wrapped = wrapEvent(ev, {
el: self.el,
type: "swipe",
timeStr: getTimeStr(),
position: self.endPos
});
Event.trigger("swipe", target, _wrapped);
// 获取具体的swipeXyz方向
callback = self["swipe" + direction];
_wrapped = wrapEvent(ev, {
el: self.el,
type: "swipe" + direction,
timeStr: getTimeStr(),
position: self.endPos
});
Event.trigger(("swipe" + direction), target, _wrapped);
_wrapped = wrapEvent(ev, {
el: self.el,
type: "swipeEnd",
timeStr: getTimeStr(),
position: self.endPos
});
Event.trigger("swipeEnd", target, _wrapped);
}, 0);
} else if(!self.triggedLongTap) {
self.tapTimeout = setTimeout(function() {
if(self.isDoubleTap) {
_wrapped = wrapEvent(ev, {
el: self.el,
type: "doubleTap",
timeStr: getTimeStr(),
position: self.startPos
});
Event.trigger("doubleTap", target, _wrapped);
clearTimeout(self.singleTapTimeout);
self.isDoubleTap = false;
} else {
self.singleTapTimeout = setTimeout(function() {
_wrapped = wrapEvent(ev, {
el: self.el,
type: "singleTap",
timeStr: getTimeStr(),
position: self.startPos
});
Event.trigger("singleTap", target, _wrapped);
}, 100);
}
}, 0);
}
this.startPos = {};
this.endPos = {};
},
// 取消长按定时器
_cancelLongTap: function() {
if(_typeOf(this.longTapTimeout) !== "null") {
clearTimeout(this.longTapTimeout);
}
}
};
Toucher.fn.init.prototype = Toucher.fn; //无new 实现
return Toucher;
}));
DEMO：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#toucher {
width: 100%;
height: 400px;
background: yellow;
}
</style>
</head>
<body>
<div id="toucher">
</div>
<div id="result"></div>
<div></div>
<script src="src/Toucher.js"></script>
<script>
window.onload = function() {
var toucher = Toucher("#toucher");
var result = document.querySelector("#result");
toucher.on("singleTap", "#toucher", function(e) {
result.innerHTML = e.type;
})
.on("doubleTap", function(e) {
result.innerHTML = e.type;
})
.on("longTap", function(e) {
result.innerHTML = e.type;
})
.on("swipe", function(e) {
result.innerHTML = e.type;
})
.on("swipeStart", function(e) {
result.innerHTML = e.type;
})
.on("swipeEnd", function(e) {
result.innerHTML = e.type;
})
.on("swipeUp", function(e) {
result.innerHTML = e.type;
})
.on("swipeRight", function(e) {
result.innerHTML = e.type;
})
.on("swipeDown", function(e) {
result.innerHTML = e.type;
})
.on("swipeLeft", function(e) {
result.innerHTML = e.type;
})
.on("rotate", function(e) {
result.innerHTML = e.type + " angle " + e.angle;
})
.on("pinch", function(e) {
result.innerHTML = e.type + " scale " + e.scale;
});
}
</script>
</body>
</html>
BUGs:
部分奇葩手机不支持e.touches，可加在上面最上面库文件的36行处：
// touches
function fnTouches(e) {
if(!e.touches) {
e.touches = e.originalEvent.touches;
}
}
