本文給大家介紹的是一款移動端下的jQuery插件Hammer.js，他是一個開源的，輕量級的javascript庫，它可以在不需要依賴其他東西的情況下識別觸摸，鼠標事件支持各種手機事件，比如縮放，qq左滑動刪除，放大，旋轉等

從pc端到移動端相信很多前端攻城師為移動端發愁，寫原聲的手機端事件是非常費力的， 而jq的click有300毫秒延遲，現在有了比較不錯的jq插件hammer，Hammer.js是一個開源的，輕量級的javascript庫，它可以在不需要依賴其他東西的情況下識別觸摸，鼠標事件支持各種手機事件，比如縮放 ，qq左滑動刪除， 放大， 旋轉等。

下面用一個tab切換來介紹hammer。

用法：

1,首先引入jq2.0以上版本和jquery.hammer.js.

2,獲取元素,和jq一樣，在后面加上hammer就可以了 var hammertime = $('.tabs a').hammer();

3,可以直接用on直接添加事件hammertime.on('tap', function(ev) {} 這樣用了hammer中的tap點擊事件。function里可以寫自己的js。

1. hammer.dragstart = function(ev) { };// 開始拖動</span> 
2.  
3. hammer.drag = function(ev) { }; // 拖動中</span> 
4. hammer.dragend = function(ev) { }; // 拖動結束</span> 
5. hammer.onswipe = function(ev) { }; // 滑動</span> 
6.  
7. hammer.tap = function(ev) { }; // 單擊</span> 
8. hammer.doubletap = function(ev) { }; //雙擊</span> 
9. hammer.hold = function(ev) { };// 長按</span> 
10.  
11. hammer.release = function(ev) { }; // 手指離開屏幕</span> 

體驗鏈接：http://hammerjs.github.io/

js code

1. $(function() { 
2. 　　var hammertime = $('.tabs a').hammer(); 
3. 　　hammertime.on('tap', function(ev) { 
4. 　　　　$(this).addClass('actives').siblings().removeClass('actives');//添加一個class 同輩級移除。 
5. 　　　　var index = $('.tabs a').index(this); //索引 
6. 　　　　$('.tab-bott').eq(index).show().siblings().hide();  
7. 　　}) 
8. }) 

以上所述就是本文的全部內容了，希望大家能夠喜歡。