扫一扫分享
alloyfinger是 腾讯Web前端团队推出的轻量级的多点触控手势库,由于其轻量、基于原生js等特性被广泛使用。
其核心代码只有300多行,完成了14个手势,其手势并不是浏览器原生的事件,而是通过监听touchstart、touchmove、touchend、touchcancel四个原生浏览器事件hack出来的手势,故其用法与原生可能有些不同。比如阻止默认事件、阻止冒泡,不能像原生事件那样用。
官方代码除了alloyfinger的核心库外还有react、vue的实现。
npm install alloyfinger
var af = new AlloyFinger(element, {
touchStart: function () { },
touchMove: function () { },
touchEnd: function () { },
touchCancel: function () { },
multipointStart: function () { },
multipointEnd: function () { },
tap: function () { },
doubleTap: function () { },
longTap: function () { },
singleTap: function () { },
rotate: function (evt) {
console.log(evt.angle);
},
pinch: function (evt) {
console.log(evt.zoom);
},
pressMove: function (evt) {
console.log(evt.deltaX);
console.log(evt.deltaY);
},
swipe: function (evt) {
console.log("swipe" + evt.direction);
}
});
/**
* this method can also add or remove the event handler
*/
var onTap = function() {};
af.on('tap', onTap);
af.on('touchStart', function() {});
af.off('tap', onTap);
/**
* this method can destroy the instance
*/
af = af.destroy();
手机预览