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

dadong 发布于2019-08-22 10:57 / 3253人阅读

摘要：移动端兼容端手势操作库，支持的事件单击双击长按滑动开始滑动结束滑动向左划向右划向上划向下划提供的接口配置项单击事件允许的滑动距离双击事件的延时时长两次单击的最大时间间隔长按事件的最小时长触发方向滑动的最小距离触发方向滑动允许的最长时长以上是

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

感谢您的阅读！

专线服务混合云兼容pc端浏览器兼容支持webrtc的移动端 webrtc移动端兼容性 pc端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91520.html

HTML5中手势原理分析与数学知识的实践

摘要：中手势原理分析与数学知识的实践引言在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。这篇博文主要是解析了移动端常用手势的原理，及从前端的角度学习过程中所使用的数学知识。 HTML5中手势原理分析与数学知识的实践引言在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。现代应用越来越重视与用户的交互及体验，手势是最直接且最为有效的交互方式，一个好的手势交互，能...

rollback 2019-08-20 18:33 评论0 收藏0
谈谈jquery的实现

摘要：最近写了些移动端的项目，在端操作，必不可少。在用这些库的时候，经常会想该如何实现这样的写法呢看了很多源码的分析，又看了很多实例，终于算是明白了。打开控制台打印一个就会发现属性完整代码简易的实现。最近写了些移动端的项目，在PC端操作dom，jQuery必不可少。但是在移动端引入jQuery就显得不合适，一是文件太大，二是不支持一些触摸。zepto.js是移动端的jQuery，体积很小，...

bergwhite 2019-08-20 16:05 评论0 收藏0
前端常用插件、工具类库汇总

摘要：页面调试腾讯开发维护的代码调试发布，错误监控上报，用户问题定位。同样是由腾讯开发维护的代码调试工具，是针对移动端的调试工具。前端业务代码工具库。动画库动画库，也是目前通用的动画库。本人微信公众号：前端修炼之路，欢迎关注本篇文章整理自己使用过的和看到过的一些插件和工具，方便日后自己查找和使用。另外，感谢白小明，文中很多的工具来源于此。弹出框 layer：http://layer....

GitCafe 2019-08-23 13:57 评论0 收藏0
H5全屏滑动

摘要：比如最常见的活动营销简历页面是一个全屏滚动页面。这个是公司定的规则，并没有写入规范，但是成为了业内标准。就是包含屏幕块的标签操作值实现动画。在用户移动手机的过程中连续触发。用户的手指离开屏幕的瞬间触发。移动web时代，学会做一些简单H5页面会很受用。比如最常见的活动营销简历H5页面是一个全屏滚动页面(fullpage)。以下就是一个简单的例子。 DEMO：Demo地址空的页面新...

legendaryedu 2019-08-02 18:17 评论0 收藏0
web app遇到的一些坑及小技能（持续更新...）

摘要：遇到的一些坑问题手机端事件会有大约的延迟原因手机端事件，因为在事件触发之后，浏览器要判断用户是否会做出双击屏幕的操作，所以会等待来判断，再做出是否触发事件的处理，所以就会有的延迟解决方法使用事件来代替事件，如的事件和，还有我自己遇到的一些坑问题：手机端 click 事件会有大约 300ms 的延迟原因：手机端事件 touchstart --> touchmove --...

darry 2019-08-21 10:44 评论0 收藏0