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

移动端ajax,jQuery基于$.ajax设置移动端click超时处理方法相关推荐

  1. html移动端隐藏div,bootstrap 如何设置移动端元素隐藏

    bootstrap设置移动端元素隐藏的方法:首先打开相应代码文件:然后使用Bootstrap的网格系统:最后通过"visible-xs-block"设置在超小设备手机显示隐藏即可. ...

  2. java接口超时设置_java接口请求超时处理方法

    //********* // 成员内部类 class CallableThread implements Callable { @Override public Result call() { try ...

  3. ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论

    基于jquery实现ajax无刷新评论 发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...

  4. jQuery与Ajax应用(学习笔记)

    内容:摘自<锋利的jQuery>第一版 第六章 Ajax全称为 "Asynchronous Javascript and XML"  (异步Javascript与XML ...

  5. jQuery 与 Ajax

    一 ajax 是什么? AJAX (Ansnchronous javascript and XML) 异步 JavaScript 和 XML.是一种用于创建快速动 态网页的技术.通过在后台与服务器进行 ...

  6. jQuery Ajax 和 axios Ajax

    一.区别: axios是通过promise技术实现对ajax实现的一种封装,本身上来说axios就是ajax,但是ajax却不单单只是axios:jQuery也实现了对ajax技术的封装,但是jQue ...

  7. html追加datatype,jquery ajax中dataType的设置问题

    jquery ajax中dataType的设置问题,代码如下: $.ajax({ url:'/main.php?action=getDepart&cid='+cid, type:'post', ...

  8. jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)

    jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...

  9. 为jQuery的$.ajax设置超时时间

    jQuery的ajax模块封装了非常强大的功能,有时候我们在发送一个ajax请求的时候希望能有一个超时的时间,想让程序在一段时间请求不到数据时做出一些反馈.幸运的是jQuery为我们提供了这样的参数: ...

最新文章

  1. Java code lib aes 加解密
  2. TIMESTAMP 与 explicit_defaults_for_timestamp
  3. python学习-模块和包
  4. intelliJ Idea 添加 Tomcat部署(详细步骤)
  5. [html] 使用button当按钮和使用div当按钮有什么区别?
  6. mysql 转int_MySQL索引凭什么能让查询效率提高这么多?
  7. 微软拒绝修复影响所有 Windows 版本的 “RemotePotatoo” 提权0day
  8. (centos6.5)MySQL服务安装
  9. MATLAB编程实例
  10. PHP100的php教程批量打包下载
  11. 项目云台控制页面(仿遥控器)
  12. 人工智能优缺点_人工智能的优缺点
  13. 百度ueditor富文本--配置图片上传
  14. DOJP1520星门跳跃题解
  15. [笔试] 搜狗校招哈尔滨,武汉站 - 实现加减乘操作
  16. 哈哈哈哈,16 岁高中生开发「粤语编程」项目,在 GitHub 火了!
  17. 软件测试质量度量,软件测试过程质量的度量
  18. Mac中Android Studio使用内存调整方法
  19. 【Qt网络编程】实现TCP协议通信
  20. vCenter通过vMotion迁移虚拟机条件

热门文章

  1. python基本模块中的对象_Python 学习笔记 -- OS模块的常用对象方法
  2. oracle数据modeling分类,由浅入深 NoSQL的五种主流数据模型
  3. php static 访问,使用PHP访问Static方法的最佳方法
  4. [渝粤教育] 盐城工学院 水处理微生物学 参考 资料
  5. [渝粤教育] 江苏食品药品职业技术学院 酸奶及冰淇淋生产技术 参考 资料
  6. 【渝粤教育】 国家开放大学2020年春季 1068小企业管理 参考试题
  7. [渝粤教育] 中国地质大学 金融保险业会计 复习题 (2)
  8. 【渝粤教育】广东开放大学 商务英语听说 形成性考核 (37)
  9. 【渝粤题库】陕西师范大学201721 数学教育学 作业(专升本)
  10. linux下客户端与ntp同步时间,如何在Windows客户端和Linux NTP服务器之间同步时间?...