jQuery基于$.ajax設置移動端click超時處理方法
來源:易賢網(wǎng) 閱讀:1182 次 日期:2016-06-30 16:25:09
溫馨提示:易賢網(wǎng)小編為您整理了“jQuery基于$.ajax設置移動端click超時處理方法”,方便廣大網(wǎng)友查閱!

這篇文章主要介紹了jQuery基于$.ajax設置移動端click超時處理方法,分析了click事件與touchstart事件的原理與處理技巧,需要的朋友可以參考下

本文實例講述了jQuery基于$.ajax設置移動端click超時處理方法。分享給大家供大家參考,具體如下:

這里介紹jquery click事件如何在移動端自動轉(zhuǎn)換成touchstart事件。

因為移動端click事件會比touchstart事件慢幾拍

移動設備某個元素上事件執(zhí)行順序是:

touchstart

touchmove

touchend

click{mousedown->mousemove->mouseup}

click事件在移動設備上雖然會識別但卻是最后一個執(zhí)行的,所以如果不把click事件換成touchstart事件的話,就可能造成延時導致交互上也慢了幾拍

所以在移動端最好把click事件換成touchstart事件。

那么如何添加事件比較簡單呢.

于是乎有了以下這種寫法:

var handle = function (e) {

  e.preventDefault(); // 阻止瀏覽器默認行為

  alert('fuck world');

}

$('body').on('touchstart mousedown', handle );

這樣在pc端瀏覽器上面alert只執(zhí)行一次,觸發(fā)的事件是mousedown

在ios設備safari瀏覽器上面alert也只執(zhí)行一次,觸發(fā)的事件是touchstart

為什么只執(zhí)行一次?

秘密在于當執(zhí)行的是touchstart后,preventDefault掉了后面的click就不執(zhí)行了,“非常完美”.

^_^! 一如既往的android設備蛋疼是必須的,測試發(fā)現(xiàn)除qq瀏覽器外其它瀏覽器都會alert兩次

也就是說touchstart和mousedown的handle函數(shù)都執(zhí)行了, 似乎是e.preventDefault()沒有起作用。具體原因不明...

因為要兼容,所以就沒辦法了只能通過判斷是否支持touch事件來分別添加事件了..

那就擴展一個jquery方法插件吧仿一個on方法的插件方法比如名稱為quickOn,(如果你連on方法怎么用都不知道,那你就走吧,離開這里...)

;(function(){

  var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';

   if(!$.fn.quickOn){

   $.fn.quickOn= function(){

    arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0];

    return $.fn.on.apply(this, arguments);

   };

  }

})();

quickOn雖然名字尷尬了一點,但是能用,例如:

$('body').quickOn('click', function(){

 alert('fuck world') ;

})

額。。后來想想,為什么不直接重載jquery的on方法呢??

來吧,試試

;(function(){

  var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click', _on = $.fn.on;

   $.fn.on = function(){

    arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0];

    return _on.apply(this, arguments);

   };

})();

希望本文所述對大家jQuery程序設計有所幫助。

更多信息請查看網(wǎng)絡編程
易賢網(wǎng)手機網(wǎng)站地址:jQuery基于$.ajax設置移動端click超時處理方法

2026國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)