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.