ISO处理jq事件

jquery事件在IOS中不起作用并且事件有延迟

正文内容:

jq事件在IOS上,如果标签本身不具备某些功能,而我们通过document或者body绑定上去的话,有些事件是不起作用的,同时在IOS上jq事件也存在延迟。

事件不起作用

这里点击事件为例,在IOS中本身默认不可点击的元素,如(div, span),此时点击事件会失效。

解决办法

  1. 将click事件直接绑定到目标元素。
  2. 将目标元素换成 a 标签或者 button 等可以点击的元素。
  3. click事件委托到非 document 或者 body 的父级元素上。
  4. 给目标元素加一条样式规则 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()即可

  1 window.addEventListener(function(){
  2     FastClick.attach( document.body );
  3 },false );

如果你项目使用了JQuery,就将上面的代码改写成:

$(function() {
    FastClick.attach(document.body);
});  
方法三:指针事件

指针事件最初由微软提出,现已进入 W3C 规范的候选推荐标准阶段 (Candidate Recommendation)。指针事件是一个新的 web 事件系列,相应的规范旨在使用一个单独的事件模型,对所有输入类型,包括鼠标 (mouse)、触摸 (touch)、触控 (stylus) 等,进行统一的处理。
指针事件 (Pointer Events) 目前兼容性不太好,不知道在以后会不会更加支持。

时间: 2024-10-06 22:10:21

ISO处理jq事件的相关文章

事件委托和JQ事件绑定总结

事件委托: 比喻:事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收. 实现原理:我们知道,DOM在为页面中的每个元素分派事

JQ 事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title></title> <scr

JQ事件委托导致点击事件多次执行问题

起因:最近写网页其中一个模块使用tab切换~每一个tab里都有点击按钮提交事件,刚开始点击提交只执行一次,但是只要我tab切换页面又切换回来该页面,再点击该按钮,我切换了多少次页面,代码提交也会提交很多次: 原因:后来找了一下原因,得知是因为JQ事件委托导致点击事件多次执行的(事件委托是指:利用事件冒泡,指定一个事件处理程序来管理某一类型的所有事件),虽然我页面切换了,但是事件问题还在,所以才会点击一次执行多次: 解决方法:使用off()函数移除之前添加的事件处理程序,就能解决该问题. eg:

jQuery框架使用,jq选择器,jq操作页面内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息,js/jq页面加载完毕事件,jq事件

jq选择器 // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取的是jq对象数组 // 拿到指定的页面元素jq对象 $('css3选择器语法').eq(index); var $box = $(".box").eq(1); 获取的是jq对象数组 // jq 转 js ( jq对像就是由数组包裹的js对象 ) box1 = $box[0] 从数组里取出来 box1 = $box.g

自定义JQ事件,对input输入框内容进行实时监听-韩烨

直入主题,首先分为两种情况!ie和非ie. 确定一个事情,判断是否为ie浏览器.方法为 var ie = !-[1,]; ie浏览器中检测为true,非ie检测为false. ie能够识别ie这个变量的","而非ie浏览器直接忽略掉这个",".以此来进行判断 下一步就是监听! 完整代码: 调用propertychange事件.此事件只适合ie浏览器!apple用于改变this的指向! 非ie浏览器直接使用input事件.这样,我们就定义好了一个input事件 跟jq

JS异步加载,JQ事件不被执行解决方法

一,在我们实现动态生成HTML代码时会出现,使用JQ方法会不被执行,解决方法,如下:使用jquery的委托事件,将该方法委托到页面已经存在的一个节点上 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

JQ事件和事件对象

1 事件 一 .鼠标事件 1.ready()页面载入事件:载入文档节点 2 click()熟悉的单击事件 3 dbclick()双击事件 4 mousedown() /mouseup() 鼠标按下和松开事件 5 mouseover()/mouseout() 鼠标移入和移出事件 6 mouseenter()/mouseleave() 鼠标移入移出事件 //mouseover()/mouseout()和mouseenter()/mouseleave()的区别 首先来了解一下事件冒泡和捕获 事件冒泡:

jq——事件

http://www.w3school.com.cn/jquery/jquery_ajax_intro.asp $(document),$(body) 加载事件: $(document).ready(fn) $(document).ready(function(){ alert("这是加载事件"); }); 简写:$(function(){});工作中简写比较多 js:window.onload=fn   把页面上的DOM和资源加载完成之后执行 jq:$(document).ready

jq 事件冒泡总结

什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 <%@PageLanguage="C#"AutoEve