移动端ajax,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程序设计有所帮助。
移动端ajax,jQuery基于$.ajax设置移动端click超时处理方法相关推荐
- html移动端隐藏div,bootstrap 如何设置移动端元素隐藏
bootstrap设置移动端元素隐藏的方法:首先打开相应代码文件:然后使用Bootstrap的网格系统:最后通过"visible-xs-block"设置在超小设备手机显示隐藏即可. ...
- java接口超时设置_java接口请求超时处理方法
//********* // 成员内部类 class CallableThread implements Callable { @Override public Result call() { try ...
- ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论
基于jquery实现ajax无刷新评论 发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...
- jQuery与Ajax应用(学习笔记)
内容:摘自<锋利的jQuery>第一版 第六章 Ajax全称为 "Asynchronous Javascript and XML" (异步Javascript与XML ...
- jQuery 与 Ajax
一 ajax 是什么? AJAX (Ansnchronous javascript and XML) 异步 JavaScript 和 XML.是一种用于创建快速动 态网页的技术.通过在后台与服务器进行 ...
- jQuery Ajax 和 axios Ajax
一.区别: axios是通过promise技术实现对ajax实现的一种封装,本身上来说axios就是ajax,但是ajax却不单单只是axios:jQuery也实现了对ajax技术的封装,但是jQue ...
- html追加datatype,jquery ajax中dataType的设置问题
jquery ajax中dataType的设置问题,代码如下: $.ajax({ url:'/main.php?action=getDepart&cid='+cid, type:'post', ...
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- 为jQuery的$.ajax设置超时时间
jQuery的ajax模块封装了非常强大的功能,有时候我们在发送一个ajax请求的时候希望能有一个超时的时间,想让程序在一段时间请求不到数据时做出一些反馈.幸运的是jQuery为我们提供了这样的参数: ...
最新文章
- Java code lib aes 加解密
- TIMESTAMP 与 explicit_defaults_for_timestamp
- python学习-模块和包
- intelliJ Idea 添加 Tomcat部署(详细步骤)
- [html] 使用button当按钮和使用div当按钮有什么区别?
- mysql 转int_MySQL索引凭什么能让查询效率提高这么多?
- 微软拒绝修复影响所有 Windows 版本的 “RemotePotatoo” 提权0day
- (centos6.5)MySQL服务安装
- MATLAB编程实例
- PHP100的php教程批量打包下载
- 项目云台控制页面(仿遥控器)
- 人工智能优缺点_人工智能的优缺点
- 百度ueditor富文本--配置图片上传
- DOJP1520星门跳跃题解
- [笔试] 搜狗校招哈尔滨,武汉站 - 实现加减乘操作
- 哈哈哈哈,16 岁高中生开发「粤语编程」项目,在 GitHub 火了!
- 软件测试质量度量,软件测试过程质量的度量
- Mac中Android Studio使用内存调整方法
- 【Qt网络编程】实现TCP协议通信
- vCenter通过vMotion迁移虚拟机条件
热门文章
- python基本模块中的对象_Python 学习笔记 -- OS模块的常用对象方法
- oracle数据modeling分类,由浅入深 NoSQL的五种主流数据模型
- php static 访问,使用PHP访问Static方法的最佳方法
- [渝粤教育] 盐城工学院 水处理微生物学 参考 资料
- [渝粤教育] 江苏食品药品职业技术学院 酸奶及冰淇淋生产技术 参考 资料
- 【渝粤教育】 国家开放大学2020年春季 1068小企业管理 参考试题
- [渝粤教育] 中国地质大学 金融保险业会计 复习题 (2)
- 【渝粤教育】广东开放大学 商务英语听说 形成性考核 (37)
- 【渝粤题库】陕西师范大学201721 数学教育学 作业(专升本)
- linux下客户端与ntp同步时间,如何在Windows客户端和Linux NTP服务器之间同步时间?...