移动端事件js库

2023年12月12日 230次阅读 来源: common

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.

    原文作者：common
    原文地址: https://www.jianshu.com/p/83ce4c42bfc4
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞