https://github.com/rwson/toucher

Last synced: over 1 year ago
JSON representation

移动端手势库

Host: GitHub
URL: https://github.com/rwson/toucher
Owner: rwson
Created: 2016-08-17T05:54:51.000Z (almost 10 years ago)
Default Branch: master
Last Pushed: 2017-02-14T01:01:59.000Z (over 9 years ago)
Last Synced: 2025-03-29T19:11:21.285Z (over 1 year ago)
Language: JavaScript
Homepage:
Size: 154 KB
Stars: 7
Watchers: 1
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

          ### Toucher

移动端手势库

#### API

        

    Toucher("#node").config(Object).on(Object)

        或者

        

    var toucher = Toucher("#node");

    toucher.config(Object);

    toucher.on(name, callback);

    

通过

    var toucher = Toucher(css selector);

    

来构造一个Toucher对象

用

    toucher.config(Object)

    

来配置相关事件的触发条件

    touch.on(name, callbck);

    

或

    touch.on(name, target, callbck);

来绑定事件

#### 完整示例

    //  HTML

    


        

        

            

            


            


            


            


            


        

    

    

    

    //  javascript

    var toucher = Toucher("#toucher");

    

    //  回调函数会在任何时候被执行,只要event.target为#toucher或者其子元素

    toucher.on("singleTap", function(ev) {

        //  ...

    });

    

    //  只有当event.target为#event的时候,才会执行后面的回调函数

    toucher.on("singleTap", "#event", function(ev) {

        //  ...

    });

    

    //  只有当event.target为.list-item的时候,才会执行后面的回调函数

    toucher.on("singleTap", document.querySelector(".list-item"), function(ev) {

        //  ...

    });

    

####  支持的配置项(config)和事件列表(on)

- config

属性 | 含义  |  类型

---|---|---

longTapTime | 触发longTap事件的时间(毫秒),默认700ms |  Number

doubleTapTime | 在多少毫秒内连续点击两次屏幕,触发doubleTap,默认400ms  | Number

- on

###### 两个参数

name属性 | 含义 |  callback类型

---|---|---

singleTap | 轻击(单个手指) |  Fucntion

doubleTap | 手指放到屏幕(单个手指) |  Fucntion

longTap | 长按 |  Fucntion

swipe | 手指在屏幕上移动 |  Fucntion

swipeStart | 滑动开始(只触发一次) |  Fucntion

swipeEnd | 滑动结束(只触发一次) |  Fucntion

swipeUp | 上滑 |  Fucntion

swipeRight | 右滑 |  Fucntion

swipeDown | 下滑 |  Fucntion

swipeLeft | 左滑 |  Fucntion

pinch | 缩放 |  Fucntion

rotate | 旋转 |  Fucntion

###### 三个参数

name和callback和上表一样

target可以为具体的css selector, 也可以为具体的DOM元素(document.querySelector(selector)之类方法获取到的)

- off

解除之前绑定过的代理事件(之前怎样绑定的就怎样解除)

###### 例子

    var toucher = Toucher("#div");

    

    //  绑定

    toucher.on("singleTap", function(ev){});

    

    //  解除绑定

    toucher.off("sigleTap");

    

或者

    

    var toucher = Toucher("#div");

    

    //  绑定

    toucher.on("singleTap", ".list-item", function(ev){});

    

    //  解除绑定

    toucher.off("sigleTap", ".list-item");

#### 在线体验

扫描下方二维码或者手机直接访问https://rwson.github.io/Toucher/



- 参考腾讯AlloyTeam手势库[AlloyFinger](https://github.com/AlloyTeam/AlloyFinger)实现

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/rwson/toucher

Awesome Lists containing this project

README