ISO处理jq事件
jq事件在IOS上,如果标签本身不具备某些功能,而我们通过document或者body绑定上去的话,有些事件是不起作用的,同时在IOS上jq事件也存在延迟。
事件不起作用
这里点击事件为例,在IOS中本身默认不可点击的元素,如(div, span),此时点击事件会失效。
解决办法
- 将click事件直接绑定到目标元素。
- 将目标元素换成 a 标签或者 button 等可以点击的元素。
- 将click事件委托到非 document 或者 body 的父级元素上。
- 给目标元素加一条样式规则 cursor: pointer。
说明:
1、具体的方法按照自己的遇到的情况而决定。
2、如果动态增加的元素绑定事件的时候,如果离不开 document 或者 body 的话,为了避免事件,我们只能将操作的标签换成 a 或者 button。
事件延迟
移动浏览器为什么会设置300毫秒的等待时间呢?这与双击缩放的方案有关。平时我们有可能已经注意到了,双击缩放,即用手指在屏幕上快速点击两次,可以看到内容或者图片放大,再次双击,浏览器会将网页缩放至原始比例。
浏览器捕获第一次单击后,会先等待一段时间,如果在这段时间区间里用户未进行下一次点击,则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作,则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。
解决办法
方法一、进制缩放
<meta name="viewport" content="width=device-width user-scalable= 'no'">
方法二、fastclick.js
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之,FastClick 在检测到touchend事件的时候,会通过 DOM 自定义事件立即触发一个模拟click事件,并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。使用方法如下。
第一步:在页面中引入fastclick.js文件。
<script src="fastclick.js"></script>
第二步:在js文件中添加以下代码
在 window load 事件之后,在body上调用FastClick.attach()即可
window.addEventListener(function(){
FastClick.attach( document.body );
},false );
如果你项目使用了JQuery,就将上面的代码改写成:
$(function() {
FastClick.attach(document.body);
});
方法三:指针事件
指针事件最初由微软提出,现已进入 W3C 规范的候选推荐标准阶段 (Candidate Recommendation)。指针事件是一个新的 web 事件系列,相应的规范旨在使用一个单独的事件模型,对所有输入类型,包括鼠标 (mouse)、触摸 (touch)、触控 (stylus) 等,进行统一的处理。
指针事件 (Pointer Events) 目前兼容性不太好,不知道在以后会不会更加支持。
ISO处理jq事件的更多相关文章
- Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...
- (18)jq事件操作
jq的私人网站:http://jquery.cuishifeng.cn/ 具体的查看上面的网站 <!DOCTYPE html><html><head> <me ...
- JS笔记 - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
- js,jq.事件代理(事件委托)复习。
<ul id = "lists"> <li>列表1</li> <li>列表2</li> <li>列表3< ...
- jq事件
1,ready:当DOM载入就绪可以查询及操纵时绑定一个要执行的函数,在使用之前必须确保body元素的onload事件,,没有注册函数,否则不会触发ready函数. $(document).ready ...
- jq 事件取消绑定与重新绑定
前端有时会碰到这样的需求: 点击某个元素发送ajax请求, 发送期间此元素的鼠标相关事件(比如点击)无效, 发送完成鼠标点击事件功能恢复, 对于这种需求, 我们会遇到两种情况, 一种是点击的按钮为fo ...
- js事件委托篇(附js一般写法和js、jq事件委托写法)
参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...
- 对于拼接进去的html原来绑定的jq事件失效
JQ拼接显示的页面中鼠标事件失效 由于是先加载html在用js层绑定的所有后来加进来的html内容就不再绑定js了 所以我们需要利用delegate绑定,但是同样道理也不能写在普通的方法层里,因为这样 ...
随机推荐
- 大公司病,为什么要PPT背锅?
新东方年会上,一曲吐槽式的<释放自我>火遍网络,据说这六位员工,是冒着被解雇的风险完成演出的,歌词内容涉及到非常敏感的大企业病,如机构臃肿.效率低下.内耗甩锅.拍领导马屁等等,而最高潮的部 ...
- HTTP协议调试工具汇总
前言 本文收集了大量抓包工具,近40款,涵盖了各种开发语言(Java,C#,Delphi,C,C++,Objective-C,Node.js,Go,Python).各类前端(GUI,TUI,CUI,W ...
- window进行缩放时左侧菜单高度随之变化
window.onresize = function(){ $(); }
- 利用Powerdesigner16.5(64位)连接64位oracle 配置系统odbc驱动
利用Powerdesigner16.5(64位)连接64位oracle逆向工程数据库 记录一次Powerdesigner通过odbc连接64位oracle数据库.林林总总国内看到都是些乱七八糟没几个靠 ...
- 统计学习方法——KD树最近邻搜索
李航老师书上的的算法说明没怎么看懂,看了网上的博客,悟出一套循环(建立好KD树以后的最近邻搜索),我想应该是这样的(例子是李航<统计学习算法>第三章56页:例3.3): 步骤 结点查询标记 ...
- SSH框架搭建 笔记 (含spring注解驱动)
分类: web 开发2014-04-27 12:33 354人阅读 评论(0) 收藏 举报 框架springinterface注解 好久没有搭建框架了,今天整理下以前的知识,整合下SSH,没想到手生了 ...
- java 根据传入的时间获取当前月的第一天的0点0分0秒和最后一天的23点59分59秒
/** * 获取指定日期所在月份开始的时间 * lkeji * @return */ public static String getMonthBegin(String specifiedDay) { ...
- OO第四次博客作业(第四单元作业及期末总结)
(注意:本文写作顺序与作业要求不完全一致,但涵盖了作业的所有要求) 一学期的BUAA特色OO课程结束了. PART 1 我想先写我这一学期的感想 从第一单元满怀期待地写完多项式求值到最后看着60分不 ...
- Linux双网卡绑定bond详解--单网卡绑定多个IP
Linux双网卡绑定bond详解 1 什么是bond 网卡bond是通过多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡,在生产场景中是一种常用的技术.Kernels 2.4.12及 ...
- CentOS7 环境下 在Hadoop集群安装Hive
1.下载Hive的tar.gz包:http://mirror.bit.edu.cn/apache/hive/ 2.放入CentOS 7 系统中并解压:tar -zxvf apache-hive-2.3 ...