分析并解决移动端js事件响应慢的问题
来源:互联网 发布:中国书画网络电视台 编辑:程序博客网 时间:2024/05/09 18:23
额,这个标题取的还真是挺装的…
其实我想表达的是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 =
arguments[0] = (arguments[0] === ‘click’) ? isTouch: arguments[0];
return _on.apply(this, arguments);
};
})();
复制代码
这样暴力的来那么一下后,mmm….,on方法还是原来的用法,但如果你on的是click事件,那么在移动平台上会被替换成touchstart以迅速响应操作。
成功!!!
转载自: 重载jquery on方法实现click事件在移动端的快速响应
- 分析并解决移动端js事件响应慢的问题
- fastclick.js - 解决移动端 click 事件响应慢和点透问题
- fastclick.js解决移动端(ipad)点击事件反应慢问题
- as3中解决响应键盘事件时停顿一下的问题,让对象可以八方移动
- 解决局域网中网络邻居访问响应“慢”的问题
- 用多线程解决页面响应慢的问题
- 解决WebUploader在google浏览器中响应慢的问题
- 移动端压缩图片。上传获取图片并压缩。lrz.all.bundle.js插件。 accept="image/*"加载慢的问题
- js 监听移动端web触屏事件 滑动响应
- js 解决movebox移动问题 取消图片默认拖动事件
- js动态加载元素的事件响应--jquery解决
- ubuntu ping响应慢的解决
- ubuntu ping响应慢的解决
- 利用事件委托解决js元素添加后未响应绑定事件问题
- 解决eclipse编译 js文件速度太慢的问题
- 解决jquery Dialog不响应asp.net事件的问题
- 解决ViewFlipper与ScrollView滑动响应事件拦截的问题
- 解决GridView中嵌入CheckBox事件无法响应的问题
- bower管理包依赖
- 基于servlet并发的日志存储(上)
- redmine的邮件配置(QQ邮箱)
- webmoney 接口
- Akka工作原理
- 分析并解决移动端js事件响应慢的问题
- ubuntu中rar与unrar用法详解
- ListView异步加载图片,完美实现图文混排
- 图片处理软件(含源代码,各种算法,学习非常棒)
- 翻页Asppage
- phalconphp nginx 配置
- Java中普通代码块,构造代码块,静态代码块区别及代码示例
- Akka Helloworld
- 为UIWebView实现离线浏览