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

dadong 發(fā)布于2019-08-22 10:57 / 3377人閱讀

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

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,    //觸發(fā)方向滑動的最小距離
    swipeTime: 300            //觸發(fā)方向滑動允許的最長時長
  })

以上是默認值，可根據(jù)具體使用場景自行配制配置項，但需要注意每個配置項之間的約束關系，比如longTapDelay不能比doubleTapDelay小...

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

綁定事件方法，使用方式類似jQuery的on方法，支持鏈式調(diào)用，支持事件委托，回調(diào)函數(shù)返回false阻止冒泡及默認行為，同樣可以用原生的e.stoPropagation()和e.preventDefault()

注：回調(diào)函數(shù)中被注入的參數(shù)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，有一點需要注意，通過事件委托綁定的事件必須得由實際綁定事件的節(jié)點取消綁定，如：

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

.btn的tap事件委托到.btn-group，要取消該tap事件，要這樣做:
mTouch(".btn-group").off("tap", ".btn");

暫沒有實現(xiàn)這種方式：
mTouch(".btn").off("tap"); //錯誤的方式

更多用法請查看 demo

感謝您的閱讀！

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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91520.html

HTML5中手勢原理分析與數(shù)學知識的實踐

摘要：中手勢原理分析與數(shù)學知識的實踐引言在這觸控屏的時代，人性化的手勢操作已經(jīng)深入了我們生活的每個部分。這篇博文主要是解析了移動端常用手勢的原理，及從前端的角度學習過程中所使用的數(shù)學知識。 HTML5中手勢原理分析與數(shù)學知識的實踐引言在這觸控屏的時代，人性化的手勢操作已經(jīng)深入了我們生活的每個部分。現(xiàn)代應用越來越重視與用戶的交互及體驗，手勢是最直接且最為有效的交互方式，一個好的手勢交互，能...

rollback 2019-08-20 18:33 評論0 收藏0
談談jquery的實現(xiàn)

摘要：最近寫了些移動端的項目，在端操作，必不可少。在用這些庫的時候，經(jīng)常會想該如何實現(xiàn)這樣的寫法呢看了很多源碼的分析，又看了很多實例，終于算是明白了。打開控制臺打印一個就會發(fā)現(xiàn)屬性完整代碼簡易的實現(xiàn)。最近寫了些移動端的項目，在PC端操作dom，jQuery必不可少。但是在移動端引入jQuery就顯得不合適，一是文件太大，二是不支持一些觸摸。zepto.js是移動端的jQuery，體積很小，...

bergwhite 2019-08-20 16:05 評論0 收藏0
前端常用插件、工具類庫匯總

摘要：頁面調(diào)試騰訊開發(fā)維護的代碼調(diào)試發(fā)布，錯誤監(jiān)控上報，用戶問題定位。同樣是由騰訊開發(fā)維護的代碼調(diào)試工具，是針對移動端的調(diào)試工具。前端業(yè)務代碼工具庫。動畫庫動畫庫，也是目前通用的動畫庫。本人微信公眾號：前端修煉之路，歡迎關注本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。另外，感謝白小明，文中很多的工具來源于此。彈出框 layer：http://layer....

GitCafe 2019-08-23 13:57 評論0 收藏0
web app遇到的一些坑及小技能（持續(xù)更新...）

摘要：遇到的一些坑問題手機端事件會有大約的延遲原因手機端事件，因為在事件觸發(fā)之后，瀏覽器要判斷用戶是否會做出雙擊屏幕的操作，所以會等待來判斷，再做出是否觸發(fā)事件的處理，所以就會有的延遲解決方法使用事件來代替事件，如的事件和，還有我自己遇到的一些坑問題：手機端 click 事件會有大約 300ms 的延遲原因：手機端事件 touchstart --> touchmove --...

darry 2019-08-21 10:44 評論0 收藏0