重载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= ...
随机推荐
- Checkbox & Excel
Checkbox & Excel Q: Excel how to check checkbox? 这个怎么打勾✔ ? A: 可以打勾的 How to Insert and Use a Chec ...
- 第129天:node.js安装方法
node.js安装方法 第一步:双击node.js安装包开始安装,注意64位和32位,按照自己的进行安装 第二步:在安装过程中一直选择next,在选择安装目录时,大多数默认安装在C盘,我安装在了D盘, ...
- 【.Net+数据库】sqlserver的四种分页方式
第一种:ROW_NUMBER() OVER()方式 select * from ( select *, ROW_NUMBER() OVER(Order by ArtistId ) AS RowId ...
- bzoj1211-树的计数
题意 给出 \(n\) 和长度为 \(n\) 的数列 \(d\) 表示每个点的度数,问有多少颗满足要求的树. 分析 这题是prufer编码的应用. prufer编码是对一个带标号无根树的刻画,生成方式 ...
- 移动端开发-viewport
1.viewport viewport 即设备 屏幕上显示网页的区域.因为移动设备屏幕比较小,为了能让移动设备能够显示更多内容,默认设置的viewport 并不是屏幕真是像素点的宽度,一般为980px ...
- Linux内核分析7
一.理论知识 Linux中,可以从c源代码生产一个可执行程序,这其中要经过预处理.编译和链接的过程.可以参考以下图来理解这个过程: 其中,目标文件中至少有编译后的机器指令代码.数据,也还包括了链接时所 ...
- 2017-2018-2 20165218 实验四《Android开发基础》实验报告
实验三 Android开发基础 课程:java程序设计 姓名:赵冰雨 学号:20165218 指导教师:娄嘉鹏 实验日期:2018.4.14 实验内容: 1.基于Android Studio开发简单的 ...
- c语言中,指针加1的情况.指针变量详细介绍
指针是一个特殊的变量,它里面存储的数值被解释成为内存里的一个地址. 要搞清一个指针需要搞清指针的四方面的内容: 指针的类型, 指针所指向的 类型, 指针的值或者叫指针所指向的内存区, 还有指针本身所占 ...
- Codeforces 906B. Seating of Students(构造+DFS)
行和列>4的可以直接构造,只要交叉着放就好了,比如1 3 5 2 4和2 4 1 3 5,每一行和下一行用不同的方法就能保证没有邻居. 其他的可以用爆搜,每次暴力和后面的一个编号交换并判断可行性 ...
- oracle中建立job(任务)
--Oracle trunc()函数的用法/**************日期********************/1.select trunc(sysdate) from dual --2013- ...