当前位置：首页 > 资讯 > 技术文档

jQuery基于$.ajax设置移动端click超时处理方法

时间：2021-06-09 21:05 编辑：来源：阅读：
扫一扫，手机访问

摘要：jQuery基于$.ajax设置移动端click超时处理方法

本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法。分享给大家供大家参考，具体如下：这里介绍jquery click事件如何在移动端自动转换成touchstart事件。因为移动端click事件会比touchstart事件慢几拍 [b]移动设备某个元素上事件执行顺序是：[/b] 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 [b]为什么只执行一次？[/b] 秘密在于当执行的是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相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/93.htm]jquery中Ajax用法总结[/url]》、《[url=http://www.1sucai.cn/Special/514.htm]jQuery切换特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/497.htm]jQuery拖拽特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/451.htm]jQuery扩展技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/430.htm]jQuery常见经典特效汇总[/url]》、《[url=http://www.1sucai.cn/Special/104.htm]jQuery动画与特效用法总结[/url]》、《[url=http://www.1sucai.cn/Special/75.htm]jquery选择器用法总结[/url]》及《[url=http://www.1sucai.cn/Special/200.htm]jQuery常用插件及用法总结[/url]》希望本文所述对大家jQuery程序设计有所帮助。

全部评论(0)

上一篇：jQuery点击弹出下拉菜单的小例子
下一篇：jQuery过滤选择器详解

资讯排行榜
更多>>