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


Posted in Javascript onMay 14, 2016

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

Javascript 相关文章推荐
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
jQuery基于扩展实现的倒计时效果
May 14 #Javascript
Angularjs中UI Router的使用方法
May 14 #Javascript
两种js监听滚轮事件的实现方法
May 13 #Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 #Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 #Javascript
AngularJS在IE8的不支持的解决方法
May 13 #Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 #Javascript
You might like
ThinkPHP发送邮件示例代码
2016/10/08 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
python实现汉诺塔算法
2021/03/01 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
高级Java程序员面试题
2016/06/23 面试题
大学生职业规划前言模板
2013/12/27 职场文书
房地产广告策划方案
2014/05/15 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
个人授权委托书格式
2014/08/30 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
导游词之桂林
2019/08/20 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js
python热力图实现的完整实例
2022/06/25 Python