移动端touch事件影响click事件

click点击事件在ios上会有300毫秒的延迟目前有以下解决方法: 方法一:静止缩放

[html] view plain copy

<meta name="viewport" content="width=device-width user-scalable= 'no'"> 

使用这个方法必须完全禁用缩放来达到目的,虽然大部分移动端能解决这个延迟问题,但是部分苹果手机还是不行。

方法二:fastclick.js FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之,FastClick 在检测到touchend事件的时候,会通过 DOM 自定义事件立即触发一个模拟click事件,并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。使用方法如下。

第一步:在页面中引入fastclick.js文件。

  第二步:在js文件中添加以下代码
  在 window load 事件之后,在body上调用FastClick.attach()即可。

[javascript] view plain copy window.addEventListener(function(){
FastClick.attach( document.body );
},false );

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

[javascript] view plain copy $(function() {
FastClick.attach(document.body);
});

方法三:指针事件

指针事件最初由微软提出,现已进入 W3C 规范的候选推荐标准阶段 (Candidate Recommendation)。指针事件是一个新的 web 事件系列,相应的规范旨在使用一个单独的事件模型,对所有输入类型,包括鼠标 (mouse)、触摸 (touch)、触控 (stylus) 等,进行统一的处理。

  指针事件 (Pointer Events) 目前兼容性不太好,不知道在以后会不会更加支持。
  
  
  另外普通标签绑定点击事件在ios上有时无效,需要增加cursor:pointer属性

猜你喜欢

转载自www.cnblogs.com/web-leader/p/9400139.html
今日推荐