mTouch移动端 ( 兼容pc端) 手势操作库

最新推荐文章于 2021-09-02 14:32:34 发布

weixin_33897722

最新推荐文章于 2021-09-02 14:32:34 发布

阅读量200

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000003004474

版权

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

感谢您的阅读！