使用fastClick.js所产生的一些问题

开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决。

页面引入fastClick.js后,滑动H5页面的时候发现谷歌浏览器会报错,如下:

Unable to preventDefault inside passive event listener due to target being treated

查询了之后发现这是因为Chrome及其内核浏览器更新了一项新特性,原先只会报黄色等级的错误,现在升到红色了。那么如何解决呢?

一般现在有两种方案:

  1. 最简单的是加上*{ touch-action: none; } 不进行任何touch相关默认行为.
  2. 手动清除默认行为
document.addEventListener('touchmove', function (event) {
event.preventDefault();
}, {
passive: false
});

看似第一种简单方便,可是用了之后突然发现页面不能滑动了,在浏览器中鼠标还是能正常滚动,但改成触摸模式后就不行了。在手机上也不能滑动。关于touch-action的属性值,具体查文档就行了。auto是默认值,表示手势操作什么的完全有浏览器自己决定。manipulation表示浏览器只允许进行滚动和持续缩放操作,类似双击缩放这种非标准操作就不可以。想当初,click事件在移动端有个300ms延时,就是因为避免和手机双击行为发生冲突。然而,当我们设置了touch-action:manipulation干掉了双击行为,则显然,300ms延时就不复存在,因此,html {touch-action: manipulation;}声明可以用来避免浏览器300ms延时问题。想到这,突然想到还用使用fastClick吗,直接用这个css属性不就行了。还引那么一堆东西干嘛。查了touch-action的兼容性,发现在移动端大多数还是兼容的。于是移动端以后就可以大胆的使用click事件了。

转: https://www.cnblogs.com/dxzg/p/9378334.html

https://blog.csdn.net/iChangebaobao/article/details/95351586

引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener的更多相关文章

  1. jquery.nicescroll.js Unable to preventDefault inside passive event listener due to target being treated as passive.

    解决办法就是:https://github.com/bestjhh/Plugin 下载替换. 参考: https://github.com/bestjhh/Plugin https://blog.cs ...

  2. Hammer.js移动端触屏框架的使用

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...

  3. 原生js实现网页触屏滑动

    前言: 我有一个html格式的2048游戏,可以用键盘上下左右操作,但是放到手机上就抓瞎了.于是想修改一下代码,将键盘事件改成手机触屏事件. html5 的touch事件 html5支持touch事件 ...

  4. zepto.js swipe实现触屏tab菜单

    今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功 ...

  5. html5 touch事件实现触屏页面上下滑动(二)

    五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

  6. iOS开发——锁屏监听

    公司所做的项目,锁屏监听是为了60秒后,解锁瓶后显示[手势解锁]或[指纹验证]: 第一步:AppDelegate.m 头部导入 #import <notify.h> #define Not ...

  7. React.js 小书 Lesson9 - 事件监听

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...

  8. 使用 JS 关闭警告框及监听自定义事件(amaze ui)

    使用 JS 关闭警告框及监听自定义事件(amaze ui) 一.总结 1.jquery匿名函数:第8行,jquery匿名函数,$(function(){});,有没有很简单,只是少了jquery的前面 ...

  9. Android ScrollView监听滑动到顶部和底部的两种方式(你可能不知道的细节)

    Android ScrollView监听滑动到顶部和底部,虽然网上很多资料都有说,但是不全,而且有些细节没说清楚 使用场景: 1. 做一些复杂动画的时候,需要动态判断当前的ScrollView是否滚动 ...

随机推荐

  1. Springboot2 jpa druid多数据源

    package com.ruoyi; import org.mybatis.spring.annotation.MapperScan; import org.springframework.beans ...

  2. 医疗行业预测性产品的质量如何把关?MES系统帮大忙

    作为行业细分的医疗设备制造正在向工业4.0快速发展.它也可能仍然是世界上受监管最严格的行业之一,产品的个性化发展速度比其他行业更快. 在医疗设备行业中,由于需求或由于市场特定的规定,产品越来越多地定制 ...

  3. YUV详解

    YUV格式解析2 又确认了一下H264的视频格式——H264支持4:2:0的连续或隔行视频的编码和解码   YUV(亦称YCrCb)是被欧洲电视系统所采用的一种颜色编码方法(属于PAL).YUV主要用 ...

  4. Oracle11g 干净卸载

    原文链接:https://www.cnblogs.com/su-root/p/9689787.html 作 者:小柏 出 处:https://www.cnblogs.com/su-root   Ora ...

  5. 生产环境OOM\死锁问题排查修复

    OOM: 1.快速恢复业务:如果是集群中的一台机器故障,先隔离故障服务器:如果是多台,则根据Nginx转发策略,对该功能转发到单独的集群,与其他流量隔离,确保其他业务不受影响 2.收集内存溢出Dump ...

  6. 【转】UItraEdit破解

      安装UltraEdit(一路下一步,无难点)成功后,打开软件弹出如下使用模式提示信息.   关掉UltraEdit软件,同时  断本机网络.重新打开UltraEdit软件:   点击[输入许可证密 ...

  7. 大数据:Hadoop(HDFS 读写数据流程及优缺点)

    一.HDFS 写数据流程 写的过程: CLIENT(客户端):用来发起读写请求,并拆分文件成多个 Block: NAMENODE:全局的协调和把控所有的请求,提供 Block 存放在 DataNode ...

  8. ARM架构体系

    架构 处理器家族 ARMv1 ARM1 ARMv2 ARM2.ARM3 ARMv3 ARM6, ARM7 ARMv4 StrongARM.ARM7TDMI.ARM9TDMI ARMv5 ARM7EJ. ...

  9. admin端的专业管理模块功能测试

    1.概述 1.1 测试范围 本次所测试的内容是admin端的专业管理模块. 1.2 测试方法 本次测试采用黑盒子方法进行集成测试. 1.3 测试环境 操作系统:Windows 2012 Server ...

  10. HDU2883 kebab(最大流判断满流 + 离散化 + 区间化点)

    [题意]: 有一个烤箱,烤箱在一个时刻最多考M个肉串,N个顾客,每个顾客有属性s,n,e,t s是来的时间,n是想要的肉串数量,e是最晚离开的时间,t是烤的时间(几分熟). 顾客的烤肉可以分开烤,比如 ...