mTouch移動端 ( 兼容pc端) 手勢操作庫

dadong 發布于2019-08-22 10:57 / 3370人閱讀

摘要：移動端兼容端手勢操作庫，支持的事件單擊雙擊長按滑動開始滑動結束滑動向左劃向右劃向上劃向下劃提供的接口配置項單擊事件允許的滑動距離雙擊事件的延時時長兩次單擊的最大時間間隔長按事件的最小時長觸發方向滑動的最小距離觸發方向滑動允許的最長時長以上是

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

感謝您的閱讀！

GPU云服務器云服務器兼容pc端瀏覽器兼容支持webrtc的移動端 webrtc移動端兼容性 pc端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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