使用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. MES系统帮助冷轧厂实现次品的流程解析

    为了解决现场实际生产过程中纸质不良品卡片易丢失.周期长.传递缓慢,不能起到质量警示和生产预警等诸多方面的问题,某冷轧厂采取了在MES系统中实现不良品业务流程的方案,完全替代和取消了纸质不良品卡片,在M ...

  2. Android源码分析(三)-----系统框架设计思想

    一 : 术在内而道在外 Android系统的精髓在源码之外,而不在源码之内,代码只是一种实现人类思想的工具,仅此而已...... 近来发现很多关于Android文章都是以源码的方向入手分析Androi ...

  3. FFMPEG SDK 开发介绍(原创)

    来源:http://blog.sina.com.cn/s/blog_62a8419a01016exv.html 本文是作者在使用ffmpeg sdk开发过程中的实际经验,现在与大家分享,欢迎学习交流. ...

  4. sparkContext的初始化过程

    SparkContext 初始化的过程主要的核心:1) 依据 SparkContext 的构造方法中的参数 SparkConf 创建一个SparkEnv2) 初始化,Spark UI,以便 Spark ...

  5. 【数据库】数据库入门(三): SQL

    SQL: 结构化查询语言(Structured Query Language) SQL 是由 IBM 公司首先开发产生,它是关系型数据库最早出现的商用语言之一.1974年,IBM 公司 San Jos ...

  6. java8中日期字符串的月日时分秒自动补零

    需求:如字符串2019-7-1 9:6:5转成2019-07-01 09:06:05 java8实现如下: public static String getStartDate(String start ...

  7. c#中的解析HTML组件 -- (HtmlAgilityPack,Jumony,ScrapySharp,NSoup,Fizzler)

    做数据抓取,网络爬虫方面的开发,自然少不了解析HTML源码的操作.那么问题来了,到底.NET如何来解析HTML,有哪些解析HTML源码的好用的,有效的组件呢?   作者在开始做这方面开发的时候就被这些 ...

  8. ovirt磁盘类型(IDE, virtio, virtio-scsi)

    ovirt磁盘类型辨析(IDE, virtio, virtio-scsi) 通过一张表格,简单明了的说明这三种硬盘的不同: 整体上来看这三者的最大不同还是挂载磁盘的数量.根据在ovirt的上测试,一台 ...

  9. Oracle创建视图 及 授权

    创建视图语句: CREATE VIEW GRM_PROFIT_VIEW AS SELECT ID, DEPT_CODE, DEPT_NAME, YMONTH, PROJECT_NAME, PROJEC ...

  10. Hbase 分页设计

    hbase 数据获取方式 直接根据 rowkey 查找,速度最快 scan,指定 startrowkey.endrowkey 和 limit获取数据,在 rowkey 设计良好的情况下,效率也不错 全 ...