• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery基于$.ajax设置移动端click超时处理方法

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

作者:懒人 字体:[增加 减小] 来源:互联网

懒人 通过本文主要向大家介绍了jQuery,ajax,设置,移动端,click,超时等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

本文实例讲述了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程序设计有所帮助。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 基于jQuery实现中英文切换导航条效果
  • jQuery功能函数详解
  • jquery实现漂浮在网页右侧的qq在线客服插件示例
  • jquery实现的一个导航滚动效果具体代码
  • jQuery列表拖动排列具体实现
  • jQuery EasyUI Dialog拖不下来如何解决
  • jquery使用animate方法实现控制元素移动
  • jquery 新浪网易的评论块制作
  • jquery图片滚动放大代码分享(2)
  • JQuery each()函数如何优化循环DOM结构的性能

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery实现弹窗功能(窗口居中显示)
    • 在jQuery 1.5中使用deferred对象的代码(翻译)
    • 解决jquery中美元符号命名冲突问题
    • jQuery对val和atrr("value")赋值的区别介绍
    • jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
    • jquery表单验证框架提供的身份证验证方法(示例代码)
    • Web前端设计模式 制作漂亮的弹出层
    • jqgrid 把jqGrid修改为响应式表格
    • jquery简单实现滚动条下拉DIV固定在头部不动
    • jQuery使用$.each遍历json数组的简单实现方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有