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.
网友评论