手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery基于$.ajax设置移动端click超时处理方法
jQuery基于$.ajax设置移动端click超时处理方法
摘要:本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法。分享给大家供大家参考,具体如下:这里介绍jqueryclick事...

本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法。分享给大家供大家参考,具体如下:

这里介绍jquery click事件如何在移动端自动转换成touchstart事件。

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

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

touchstart

touchmove

touchend

click{mousedown->mousemove->mouseup}

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

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

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

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

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

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

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

为什么只执行一次?

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

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

也就是说touchstart和mousedown的handle函数都执行了, 似乎是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程序设计有所帮助。

【jQuery基于$.ajax设置移动端click超时处理方法】相关文章:

jQuery实现控制文字内容溢出用省略号(…)表示的方法

javascript实现行拖动的方法

jQuery基于图层模仿五星星评价功能的方法

jQuery实现dialog设置focus焦点的方法

jQuery实现在列表的首行添加数据

跨浏览器的设置innerHTML方法

jquery实现点击label的同时触发文本框点击事件的方法

jQuery仿gmail实现fixed布局的方法

jQuery实现转动随机数抽奖效果的方法

jquery读取xml文件实现省市县三级联动的方法

精品推荐
分类导航