為jQuery新增Webkit的觸控方法支援

前些日子收到郵件，之前兼職的乙個專案被轉給了其他人，跟進的人來問我相關**的版權問題。

我就呵呵了。

這段**是我在做13年乙份兼職的時候無聊加上去的，為jquery新增觸控事件的支援。因為做得有點無聊，所以就幫客戶新增了用響應式網頁+js touch相容了移動裝置，主要是webkit的移動裝置。

這裡就分享下我的實現。

先貼上**：

//
published by indream luo
//contact: [email protected]
//version: chinese 1.0.0
!function
($) ;
$.indream =indream;
//define events
indream.touch =,
touchmove: ,
touchend: ,
taporclick: );
$(this).click(function
(e) 
});}).call(
this, false
); });
return
this
; }
},moveorscroll: );
$(this).scroll(function
(e) 
});}).call(
this, false
); });
return
this
; }}}
}//add events into jquery
for (var eventname in
indream.touch.evenlist) );
} else
); }
});return
this
; }
})(eventname, event.htmlevent);
}}(window.jquery);

view code

網上能找到很多關於touch事件的相關資訊，所以我就不詳細說明了，可以解釋得簡單一點。

在webkit移動裝置上，觸控操控首先會觸發觸控事件，在0.5秒後才會觸控滑鼠事件。

個人覺得這在設計上可以理解。先滿足於觸控操控的需求，然後再向「下」相容滑鼠事件，以滿足原有面向桌面網頁的使用。

所有的事件大致執行順序是：touchstart->touchmove->touchend->0.5s->滑鼠事件mouseover/scroll/click等

按照webkit移動瀏覽器的設計，一般開發時候按照桌面網頁開發，然後移動裝置上使用是沒問題的。不過桌面上大量使用的hover類效果時常會因為觸控把mouse事件+click事件觸發個遍而悲劇；0.5秒的延遲也對使用者體驗造成了大傷害。

所以我新增了taporclick事件，用途就是替代click事件，並且滅了那0.5秒。

在使用者使用觸控裝置進行滾動，而觸控已經停止的時候，瀏覽器會鎖定整個頁面，暫停所有ui資源占用，而把大部分資源留給核心進行滾動。同樣的情況還會發生在放大縮小頁面內容，甚至更甚。

因為要加個滾動漸變的特效，所以我新增了moveorscroll事件，在滑動的時候執行滾動中應該執行的效果。

當然，這裡還是不完美的，因為手指一旦離開螢幕（觸控事件停止），頁面自由滾動的這段時間，js也會被freeze。這只是沒有辦法中的辦法而已。

滾動鎖定還會導致另乙個問題就是：滾動有三種，分別是上下、左右、自由。

用一下觸控裝置就會發現，如果從觸控開始被判定是上下滾動，那麼觸控時再怎麼左右滑動都不會有左右滑動的效果，除非放開重來。同樣的情況也會發生在一開始為左右滾動。自由滾動的話需要一開始就進行斜向滾動。

在這個時候如果需要加入特定事件的話，需要注意事件的判斷。在jquery的事件**引數中，假設引數名為e，那麼一般用：

e.originalevent.touches[0].pagex

可以判斷觸控情況。開發時需要自行記錄觸控事件的情況再作判斷。

請盡量不要嘗試用大量的js方法觸發來實現一些本身沒有的樣式效果。

比如元素靜態不動，理應用position:fix;來實現，但許多開發人員會是用js不斷重新整理其控制項位置來解決。

這種實現方式放在觸控裝置上，一般只會出現兩種情況：

卡死你頁面被凍結，凍結技術後突然發現事件全部執行完了（原因如上，瀏覽器會集中ui執行緒的資源給核心優先）

一般移動裝置的螢幕有效重新整理率不過30hz，精簡指令集的cpu本身也會慢一些，加上大部分的移動裝置都是...android...

所以，效能必須盡量依賴原生提供的方法。一些hack和cover的方法對方受不了。

當時因為兼職交付好像就一兩周的事情，所以沒有把**寫得太好，不過還是能用。大致的用法跟普通的jquery事件一致，命名和實現方面確實還值得商榷：

$('.sign .usernametip').taporclick(function
() );

跟專案中的很多事情一樣，許多事情看似簡單，但實際上卻會出現各種各樣的問題。

觸控事件並不是簡單地便可相容，單實現了功能外還需要顧慮最實質的問題——特定的互動模式。

比如觸控中需要隱藏許多空間以留有更多的空間給有限的使用者螢幕；許多本身以點選切換的元素在觸控的最佳體驗中應該改成滑動切換，甚至要顧慮不同的滑動情況；觸控各事件的停留事件不同可能代表不同的操作，需要進行判別......

雖然知道jquery mobile等已經有比較完善的各種方法，不過就是忍不住自己實現一下看看。

為jQuery新增Webkit的觸控方法支援

JQuery為元素新增樣式

JQuery為元素新增樣式

JQUERY為元素新增樣式的實現方法

為jQuery新增Webkit的觸控方法支援

JQuery為元素新增樣式

JQuery為元素新增樣式

JQUERY為元素新增樣式的實現方法

相關推薦