移动端事件js库

作者: Addy_Zhou | 来源:发表于2015-11-17 11:12 被阅读2457次

    1.zepto的touch

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

     <script src='./zepto.js'></script>
     <script src='./touch.js'></script>
    

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

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

    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('<li>swipeleft...</li>');
    }).on('swiperight',
    function(ev) {
        $('#touchs').append('<li>swiperight...</li>');
    }).on('swipeup',
    function(ev) {
        $('#touchs').append('<li>swiperup...</li>');
    }).on('swipedown',
    function(ev) {
        $('#touchs').append('<li>swiperdown...</li>');
    });
    

    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库

        本文链接:https://www.haomeiwen.com/subject/pzbkhttx.html