支付宝赞助帐号:service@kuitao8.com 

jQuery的$.ajax设置超时时间

Created2015-11-19   Views 2980    Author 懒人程序
额,这个标题取的还真是挺装的...

其实我想表达的是jquery click事件如何在移动端自动转换成touchstart事件。

因为移动端click事件会比touchstart事件慢几拍

移动设备某个元素上事件执行顺序是:

touchstart

touchmove

touchend

clickmousedown->mousemove->mouseup

 

click事件在移动设备上虽然会识别但却是最后一个执行的,所以如果不把click事件换成touchstart事件的话,就可能造成延时导致交互上也慢了几拍

所以在移动端最好把click事件换成touchstart事件。

那么如何添加事件比较简单呢.

于是乎有了以下这种写法:
 

  1. var handle = function (e) { 
  2.   e.preventDefault(); // 阻止浏览器默认行为 
  3.   alert('fuck world'); 
  4. $('body').on(‘touchstart mousedown’,  handle ); 

这样在pc端浏览器上面alert只执行一次,触发的事件是mousedown

ios设备safari浏览器上面alert也只执行一次,触发的事件是touchstart

为什么只执行一次?

秘密在于当执行的是touchstart后,preventDefault掉了后面的click就不执行了,“非常完美”.

 

^_^!  一如既往的android设备蛋疼是必须的,测试发现qq浏览器外其它浏览器都会alert两次

也就是说touchstartmousedownhandle函数都执行了, 似乎是e.preventDefault()没有起作用。具体原因不明...

因为要兼容,所以就没办法了只能通过判断是否支持touch事件来分别添加事件了..

那就扩展一个jquery方法插件吧仿一个on方法的插件方法比如名称为quickOn,(如果你连on方法怎么用都不知道,那你就走吧,离开这里...

  1. ;(function(){ 
  2.         var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click'
  3.       if(!$.fn.quickOn){ 
  4.             $.fn.quickOn= function(){ 
  5.                 arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0]; 
  6.                 return $.fn.on.apply(this, arguments);     
  7.             }; 
  8.         } 
  9.   })(); 

quickOn虽然名字尴尬了一点,但是能用,例如:
 

  1. $('body').quickOn('click'function(){ 
  2.     alert('fuck world') ; 
  3. }) 

额。。后来想想,为什么不直接重载jquery的on方法呢??

来吧,试试
 

  1. ;(function(){ 
  2.         var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click', _on = $.fn.on; 
  3.             $.fn.on = function(){ 
  4.                 arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0]; 
  5.                 return _on.apply(this, arguments);  
  6.             }; 
  7.     })(); 

 

上一篇: jquery切换背景图片的简单实现方法
下一篇: jquery selected option查找选中
支持键盘 ← →

邮件订阅

订阅我们的精彩内容