為jQuery添加Webkit的觸摸的方法分享

 這段代碼是我在做13年一份兼職的時候無聊加上去的，為jQuery添加觸摸事件的支持。因為做得有點無聊，所以就幫客戶添加了用響應式網頁+JS touch兼容了移動設備，主要是Webkit的移動設備

這段代碼是我在做13年一份兼職的時候無聊加上去的，為jQuery添加觸摸事件的支持。因為做得有點無聊，所以就幫客戶添加了用響應式網頁+JS touch兼容了移動設備，主要是Webkit的移動設備。   這裡就分享下我的實現。 先貼上代碼：    代碼如下: //Published by Indream Luo //Contact: [email protected] //Version: Chinese 1.0.0   !function ($) {     window.indream = window.indream || {};     $.indream = indream;       //Define events     indream.touch = {         evenList: {             touchStart: {                 htmlEvent: 'touchstart'             },             touchMove: {                 htmlEvent: 'touchmove'             },             touchEnd: {                 htmlEvent: 'touchend'             },             tapOrClick: {                 eventFunction: function (action) {                     $(this).each(function () {                         (function (hasTouched) {                             $(this).touchEnd(function (e) {                                 hasTouched = true;                                 action.call(this, e);                             });                             $(this).click(function (e) {                                 if (!hasTouched) {                                     action.call(this, e);                                 }                             });                         }).call(this, false);                     });                       return this;                 }             },             moveOrScroll: {                 eventFunction: function (action) {                     $(this).each(function () {                         (function (hasTouched) {                             $(this).touchMove(function (e) {                                 hasTouched = true;                                 action.call(this, e);                             });                             $(this).scroll(function (e) {                                 if (!hasTouched) {                                     action.call(this, e);                                 }                             });                         }).call(this, false);                     });                       return this;                 }             }         }     }       //Add events into jquery     for (var eventName in indream.touch.evenList) {         var event = indream.touch.evenList[eventName];         $.fn[eventName] = event.eventFunction || (function (eventName, htmlEvent) {             return function (action) {                 $(this).each(function () {                     $(this).bind(htmlEvent, action);                     //Add event listener method for IE or others                     if (this.attachEvent) {                         this.attachEvent('on' + htmlEvent, function (e) {                             $(this).on(eventName);                         });                     } else {                         this.addEventListener(htmlEvent, function (e) {                             $(this).on(eventName);                         });                     }                 });                   return this;             }         })(eventName, event.htmlEvent);     } }(window.jQuery);       網上能找到很多關於Touch事件的相關信息，所以我就不詳細說明了，可以解釋得簡單一點。   觸摸事件代替鼠標事件 在Webkit移動設備上，觸摸操控首先會觸發觸摸事件，在0.5秒後才會觸摸鼠標事件。   個人覺得這在設計上可以理解。先滿足於觸摸操控的需求，然後再向“下”兼容鼠標事件，以滿足原有面向桌面網頁的使用。   所有的事件大致執行順序是：touchstart->touchmove->touchend->0.5s->鼠標事件mouseover/scroll/click等   按照webkit移動浏覽器的設計，一般開發時候按照桌面網頁開發，然後移動設備上使用是沒問題的。不過桌面上大量使用的hover類效果時常會因為觸摸把mouse事件+click事件觸發個遍而悲劇；0.5秒的延遲也對用戶體驗造成了大傷害。   所以我添加了tapOrClick事件，用途就是替代click事件，並且滅了那0.5秒。   滾動鎖定 在用戶使用觸摸設備進行滾動，而觸摸已經停止的時候，浏覽器會鎖定整個頁面，暫停所有UI資源占用，而把大部分資源留給內核進行滾動。同樣的情況還會發生在放大縮小頁面內容，甚至更甚。   因為要加個滾動漸變的特效，所以我添加了moveOrScroll事件，在滑動的時候執行滾動中應該執行的