jQuery基于$.ajax设置移动端click超时处理方法
本文实例讲述了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用法总结》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容2012-12-12
取得iframe中元素的方法有很多，在本文为大家介绍下在iframe子页面获取父页面元素的方法，下面有个不错的示例，感兴趣的朋友可以参考下2013-11-11
这篇文章主要介绍了jQuery点击页面其他部分隐藏下拉菜单功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了jQuery实现进度条效果代码，感兴趣的小伙伴们可以参考一下2015-12-12![jQuery中[attribute*=value]选择器用法实例](//img.jbzj.com/images/xgimg/bcimg4.png)
jQuery中[attribute*=value]选择器用法实例
这篇文章主要介绍了jQuery中[attribute*=value]选择器用法,实例分析了[attribute*=value]选择器的功能、定义及匹配给定的属性包含某些值的元素的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要给大家介绍了如何利用jquery实现实时更新歌词的方法,文中给出了详细的实现思路和示例代码，对大家的参考借鉴具有一定的价值，有需要的朋友下面来跟着小编一起学习学习吧。2017-01-01
本文给大家推荐了25个jQuery网格特效插件，在此集合中，我们将展示一些非常酷的jQuery插件和资源在网格布局设计，提高了数据的介绍。一些实用的插件，一定会提供一个美好的用户体验。同时，一些精致的资源，这将有助于布局精美的数据范围。2014-11-11
jquery插件，有几种方法，有全局的，有对象方法的，一直觉得jquery插件迷迷糊糊，这阵子特地研究下，供那些像我一样的初学者借鉴下。嘻嘻2012-08-08
利用JQUERY简单的实现功能菜单的折叠效果。本人初学，写后台稍多一点，很少写前台的效果。还请大虾们多多指教。2010-09-09
这篇文章主要教大家简单实现jQuery弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
![jQuery中[attribute*=value]选择器用法实例](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论