重载jquery on方法实现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);
};
})();
这样暴力的来那么一下后,mmm....,on方法还是原来的用法,但如果你on的是click事件,那么在移动平台上会被替换成touchstart以迅速响应操作。
成功!!!
特别注意:
通过重载on方法虽然很酷,但是由于响应速度快了,所以有时候也有麻烦,比如当你手指在滚动屏幕时触碰到添加了方法的元素上立刻就会有反应从而容易产生误操作
测试的手机有限,所以方法靠不靠谱,同学,请慎用。
========================================================
转载处请注明:博客园偷饭猫willian12345@126.com
重载jquery on方法实现click事件在移动端的快速响应的更多相关文章
- vue.js 1.0中用v-for遍历出的li中的@click事件在移动端无效
在vue.js使用v-for遍历出的li中的@click事件在移动端无效,在网页端可以执行,代码如下 <template> <div class="rating-secti ...
- 搜索提示時jquery的focusout和click事件沖突問題完美解决
在主流的搜索引擎上搜索時,輸入內容,往往會彈出智能提示.輸入框为input,智能提示區域为suggest.接下來一般有兩種操作: 1.選擇某一提示,則把內容复制到input中 ...
- jquery href属性和click事件冲突
a标签的定义如下: <a href="javascript:void(0);">test</a> jquery中的click事件: $("a&qu ...
- 轉:Jquery绑定img的click事件
用JQUERY给IMG element绑定click事件的时候,直接用img.click(function(){...})不起作用,如下面代码$("img.ms-rteImage-Light ...
- jquery给label绑定click事件被触发两次解决方案
首先我们看下面的代码片段(label包裹checkbox) <div class="example"><label for="chk_6" c ...
- 关于jquery中on绑定click事件在苹果手机失效的问题
用一个div当做了一个按钮来使用. <div class="button"> <div class=" next_button button_left ...
- jquery中on绑定click事件在苹果手机失效的问题
因为是动态添加的内容,所以想要使用click事件,需要给他用on绑定一下: $(document).on("click",".next_button",func ...
- 关于jquery中on绑定click事件在苹果手机失效的问题(巨坑啊)
用一个div当做了一个按钮来使用. <div class="button"> <div class=" next_button button_left ...
- JQuery不能加载click事件的问题
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
随机推荐
- 从理论到实践,全方位认识DNS
从理论到实践,全方位认识DNS 2015-11-23 程序员之家 作者:selfboot 原文:http://segmentfault.com/a/1190000003956853 对于 DNS(Do ...
- 【前端学习笔记04】JavaScript数据通信Ajax方法封装
//Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...
- css实现 显示一行文字,超出用...代替
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
- hbase windows安装
下载目前最新版本 http://mirrors.hust.edu.cn/apache/hbase/stable/ 最新版本 hbase-1.2.6 1. 解压到D:\software\hbase-1. ...
- 【uoj#139】[UER #4]被删除的黑白树 贪心
题目描述 给出一个 $n$ 个节点的树,$1$ 号点为根.现要将其中一些点染成黑色,使得每个叶子节点(不包括根节点)到根节点路径上的黑点数相同.求最多能够染多少个黑点. 题解 贪心 显然有结论:选择的 ...
- What Is The Promiscuous Mode
What Is The Promiscuous Mode? Some Network Interface Cards (NICs) may not allow network traffic afte ...
- WPF 如何加载图片
Uri ri = new Uri(AppDomain.CurrentDomain.BaseDirectory + "Resources/exp.jpg"); ImageSource ...
- 【BZOJ4198】【NOI2015】荷马史诗(贪心,Huffman树)
[BZOJ4198][NOI2015]荷马史诗(贪心,Huffman树) 题面 BZOJ 洛谷 题解 合并果子都是不知道多久以前做过的了.现在才知道原来本质就是一棵哈夫曼树啊. 这题我们仔细研究一下题 ...
- SpringMVC 重定向
在返回视图名字的字符串前面加forword:或redirect:前缀是就会对他们做特殊处理,它们分别是转发和重定向 我们测试一个重定向操作把 Java代码 @RequestMapping(" ...
- vs2003一查找就卡死了
Visual Studio 2003一查找就卡死了.解决办法如下: win7 32位下 解决方法:找到VS2003的安装目录,修改"...\Microsoft Visual Studio . ...