mTouch

mTouch挪动端 ( 兼容pc端) 手势操纵库，view on github

支撑的事宜：

• tap 单击

• doubletap 双击

• longtap 长按

• swipestart 滑动最先

• swipeend 滑动完毕

• swiping 滑动

• swipeleft 向左划

• swiperight 向右划

• swipeup 向上划

• swipedown 向下划

供应的接口

1、mTouch.config（设置项）

  mTouch.config({
    tapMaxDistance: 10,        //单击事宜许可的滑动距离
    doubleTapDelay: 200,    //双击事宜的延时时长（两次单击的最大时候距离）
    longTapDelay: 700,        //长按事宜的最小时长
    swipeMinDistance: 20,    //触发方向滑动的最小距离
    swipeTime: 300            //触发方向滑动许可的最长时长
  })

以上是默许值，可根据详细运用场景自行配制设置项，但须要注重每一个设置项之间的束缚关联，比方longTapDelay不能比doubleTapDelay小…

2、.on(eventType, [proxyStr], handler(event))

绑定事宜要领，运用体式格局相似jQuery的on要领，支撑链式挪用，支撑事宜托付，回调函数返回false阻挠冒泡及默许行动，一样可以用原生的e.stoPropagation()和e.preventDefault()

注：回调函数中被注入的参数event是拓展了的原生事宜对象, 添加了属性event.mTouchEvent

mTouchEvent = {
  type: string,
  target: dom,
  pageX: number,
  pageY: number,
  startX: number,
  startY: number,
  moveX: number,
  moveY: number
}
个中 startX、startY、moveX、moveY 只要 swiping 事宜才有

运用要领

mTouch('.btn').on('tap', function (e) {
  //...
}).on('doubletap', function (e) {
  //...
})
.on('longtap', function (e) {
  //...
});

mTouch('.btn-group').on('tap', '.btn', function (e) {
  //...
});

3、.off(eventType, proxyStr, handler)

作废绑定事宜要领，运用体式格局相似jQuery的off，有一点须要注重，经由过程事宜托付绑定的事宜必须得由现实绑定事宜的节点作废绑定，如：

mTouch('.btn-group').on('tap', '.btn', function (e) {
  //...
});

.btn的tap事宜托付到.btn-group，要作废该tap事宜，要如许做:
mTouch('.btn-group').off('tap', '.btn');

暂没有完成这类体式格局：
mTouch('.btn').off('tap'); //毛病的体式格局

更多用法请检察 demo

感谢您的浏览！