成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

mTouch移動(dòng)端 ( 兼容pc端) 手勢(shì)操作庫(kù)

dadong / 3380人閱讀

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

mTouch

mTouch移動(dòng)端 ( 兼容pc端) 手勢(shì)操作庫(kù)，view on github

支持的事件：

tap 單擊

doubletap 雙擊

longtap 長(zhǎng)按

swipestart 滑動(dòng)開(kāi)始

swipeend 滑動(dòng)結(jié)束

swiping 滑動(dòng)

swipeleft 向左劃

swiperight 向右劃

swipeup 向上劃

swipedown 向下劃

提供的接口 1、mTouch.config（配置項(xiàng)） 
  mTouch.config({
    tapMaxDistance: 10,        //單擊事件允許的滑動(dòng)距離
    doubleTapDelay: 200,    //雙擊事件的延時(shí)時(shí)長(zhǎng)（兩次單擊的最大時(shí)間間隔）
    longTapDelay: 700,        //長(zhǎng)按事件的最小時(shí)長(zhǎng)
    swipeMinDistance: 20,    //觸發(fā)方向滑動(dòng)的最小距離
    swipeTime: 300            //觸發(fā)方向滑動(dòng)允許的最長(zhǎng)時(shí)長(zhǎng)
  })

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

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

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

注：回調(diào)函數(shù)中被注入的參數(shù)event是拓展了的原生事件對(duì)象, 添加了屬性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，有一點(diǎn)需要注意，通過(guò)事件委托綁定的事件必須得由實(shí)際綁定事件的節(jié)點(diǎn)取消綁定，如：

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

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

暫沒(méi)有實(shí)現(xiàn)這種方式：
mTouch(".btn").off("tap"); //錯(cuò)誤的方式

更多用法請(qǐng)查看 demo

感謝您的閱讀！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91520.html

相關(guān)文章

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

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

    rollback 評(píng)論0 收藏0

  • 談?wù)刯query的實(shí)現(xiàn)

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

    bergwhite 評(píng)論0 收藏0

  • 前端常用插件、工具類庫(kù)匯總

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

    GitCafe 評(píng)論0 收藏0

  • web app遇到的一些坑及小技能（持續(xù)更新...）

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

    darry 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<