移动端事件js库

1.zepto的touch

zepto默认包含zepto 、event 、ajax module等,touch module并不在其中,所以需要单独下载touch.js.页面常见的引用像下面这样:

 
 

参考:http://www.css88.com/doc/zeptojs/
例子:

 $('#touchs').bind("swipeLeft",
 function(event) {
     $('#touchs').append('
  • swipeLeft...
  • '); }); $('#touchs').bind("swipeRight", function(event) { $('#touchs').append('
  • swipeRight...
  • ') }); $('#touchs').bind("swipeUp", function(event) { $('#touchs').append('
  • swipeUp...
  • '); }); $('#touchs').bind("swipeDown", function(event) { $('#touchs').append('
  • swipeDown...
  • '); });

    2.百度的touchjs

    百度的touchjs,在android机子上,左右滑动有不灵敏现象,后来我采用了下面提到的toucher.js解决了这个问题。

    参考:http://touch.code.baidu.com/
    例子:

    touch.on('#touchs', 'swipeleft swiperight swipeup swipedown',
    function(ev) {
        console.log("you have done", ev.type);
    });
    

    3.hammer

    测试下来hammer灵敏度不太好。另外hammer默认没有打开上下滑动,
    需要如下配置才能打开。

    hammertime.get('swipe').set({direction: Hammer.DIRECTION_VERTICAL});
    

    参考:http://hammerjs.github.io/getting-started/

    例子:

    var hammertime = new Hammer(document.getElementById('touchs'));
    hammertime.get('swipe').set({
        direction: Hammer.DIRECTION_VERTICAL
    });
    hammertime.on('swipeleft',
    function(ev) {
        $('#touchs').append('
  • swipeleft...
  • '); }).on('swiperight', function(ev) { $('#touchs').append('
  • swiperight...
  • '); }).on('swipeup', function(ev) { $('#touchs').append('
  • swiperup...
  • '); }).on('swipedown', function(ev) { $('#touchs').append('
  • swiperdown...
  • '); });

    4.toucher.js

    这个工具在ios和android左右滑动都很灵敏。不过它目前只支持单指手势操作。
    参考:http://bh-lay.github.io/toucher/

    例子:

    var toucher=require('../module/lib/toucher')
    toucher.util.toucher(grip).on('swipeLeft', function (ev) {
          console.log(ev);
    }).on('swipeRight',function(ev){
         console.log(ev);
    })
    

    以上所有例子,我都放到了github下:
    https://github.com/unnKoel/front-end-mobile/tree/master/mobile_event
    还有好的事件工具请回复补充,ths.

    你可能感兴趣的:(移动端事件js库)