DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 為jQuery添加Webkit的觸摸的方法分享
為jQuery添加Webkit的觸摸的方法分享
編輯:JavaScript綜合知識     

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

這段代碼是我在做13年一份兼職的時候無聊加上去的,為jQuery添加觸摸事件的支持。因為做得有點無聊,所以就幫客戶添加了用響應式網頁+JS touch兼容了移動設備,主要是Webkit的移動設備。   這裡就分享下我的實現。 先貼上代碼:    代碼如下: //Published by Indream Luo //Contact: indreamluo@qq.com //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事件,在滑動的時候執行滾動中應該執行的效果。   當然,這裡還是不完美的,因為手指一旦離開屏幕(觸摸事件停止),頁面自由滾動的這段時間,js也會被freeze。這只是沒有辦法中的辦法而已。   滾動鎖定還會導致另一個問題就是:滾動有三種,分別是上下、左右、自由。   用一下觸摸設備就會發現,如果從觸摸開始被判定是上下滾動,那麼觸摸時再怎麼左右滑動都不會有左右滑動的效果,除非放開重來。同樣的情況也會發生在一開始為左右滾動。自由滾動的話需要一開始就進行斜向滾動。   在這個時候如果需要加入特定事件的話,需要注意事件的判斷。在jQuery的事件回調參數中,假設參數名為e,那麼一般用:   e.originalEvent.touches[0].pageX可以判斷觸摸情況。開發時需要自行記錄觸摸事件的情況再作判斷。   原生最優 請盡量不要嘗試用大量的JS方法觸發來實現一些本身沒有的樣式效果。   比如元素靜態不動,理應用position:fix;來實現,但許多開發人員會是用js不斷刷新其控件位置來解決。   這種實現方式放在觸摸設備上,一般只會出現兩種情況:   1.卡死你 2.頁面被凍結,凍結技術後突然發現事件全部執行完了(原因如上,浏覽器會集中UI線程的資源給內核優先) 一般移動設備的屏幕有效刷新率不過30Hz,精簡指令集的CPU本身也會慢一些,加上大部分的移動設備都是...Android...   所以,性能必須盡量依賴原生提供的方法。一些Hack和Cover的方法對方受不了。   如何使用 當時因為兼職交付好像就一兩周的事情,所以沒有把代碼寫得太好,不過還是能用。大致的用法跟普通的jQuery事件一致,命名和實現方面確實還值得商榷:     復制代碼 代碼如下: $('.sign .usernametip').tapOrClick(function () {     $(this).css('visibility', 'hidden');     $('.sign .username').focus(); });     跟項目中的很多事情一樣,許多事情看似簡單,但實際上卻會出現各種各樣的問題。   觸摸事件並不是簡單地便可兼容,單實現了功能外還需要顧慮最實質的問題——特定的交互模式。   比如觸摸中需要隱藏許多空間以留有更多的空間給有限的用戶屏幕;許多本身以點擊切換的元素在觸摸的最佳體驗中應該改成滑動切換,甚至要顧慮不同的滑動情況;觸摸各事件的停留事件不同可能代表不同的操作,需要進行判別......   雖然知道jQuery Mobile等已經有比較完善的各種方法,不過就是忍不住自己實現一下看看。  
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved