引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener
使用fastClick.js所产生的一些问题
开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决。
页面引入fastClick.js后,滑动H5页面的时候发现谷歌浏览器会报错,如下:
Unable to preventDefault inside passive event listener due to target being treated
查询了之后发现这是因为Chrome及其内核浏览器更新了一项新特性,原先只会报黄色等级的错误,现在升到红色了。那么如何解决呢?
一般现在有两种方案:
- 最简单的是加上*{ touch-action: none; } 不进行任何touch相关默认行为.
- 手动清除默认行为
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的更多相关文章
- 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 ...
- Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- 原生js实现网页触屏滑动
前言: 我有一个html格式的2048游戏,可以用键盘上下左右操作,但是放到手机上就抓瞎了.于是想修改一下代码,将键盘事件改成手机触屏事件. html5 的touch事件 html5支持touch事件 ...
- zepto.js swipe实现触屏tab菜单
今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功 ...
- html5 touch事件实现触屏页面上下滑动(二)
五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...
- iOS开发——锁屏监听
公司所做的项目,锁屏监听是为了60秒后,解锁瓶后显示[手势解锁]或[指纹验证]: 第一步:AppDelegate.m 头部导入 #import <notify.h> #define Not ...
- React.js 小书 Lesson9 - 事件监听
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...
- 使用 JS 关闭警告框及监听自定义事件(amaze ui)
使用 JS 关闭警告框及监听自定义事件(amaze ui) 一.总结 1.jquery匿名函数:第8行,jquery匿名函数,$(function(){});,有没有很简单,只是少了jquery的前面 ...
- Android ScrollView监听滑动到顶部和底部的两种方式(你可能不知道的细节)
Android ScrollView监听滑动到顶部和底部,虽然网上很多资料都有说,但是不全,而且有些细节没说清楚 使用场景: 1. 做一些复杂动画的时候,需要动态判断当前的ScrollView是否滚动 ...
随机推荐
- 在safari上,解决fixed失效问题
一个页面中有头部.底部和中间内容区域,底部固定在屏幕底端. 头部header 内容main 底部footer 方法一.在main上使用fixed定位,加上overflow-y属性. .main { p ...
- echarts 3D地球实现自动旋转
素材已上传至https://gitee.com/i1520/echarts3DEarth.git https://github.com/i1520/echarts3DEarth 1.引入js文 ...
- 国内不fq安装K8S二: 安装kubernet
目录 2 安装kubelet 2.1 环境准备 2.2 设置国内的源 2.3 重要的设置 2.4 获取镜像 2.5 使用kubeadm init初始化集群 2.6 安装Pod Network 2.7 ...
- 【转载】深入剖析自定义View之onMeasure
1.前言 自定义View中我们看到很多都重写了onMeasure方法,那么我们首先得知道onMeasure是做什么的.onMeasure中文意思就是测量,所以它是用于测量View的大小,影响View大 ...
- docker的小技巧记录(如果使用了更多会继续添加)
docker小技巧 复制本地sql脚本到docker容器mysql中进行使用 # 找到容器 docker ps # 复制文件 cp ./xxx.sql container-id:/tmp/ # 进入容 ...
- Odoo onChange使用
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826155.html 转载请注明原文地址: [onchange=前端js函数,可以实现前端实时更新以及修改 ...
- 定时任务工具Linux crontab命令详解
crontab:定时任务的守护进程,精确到分,设计秒的我们一般写脚本 -->相当于闹钟 日志文件: ll /var/log/cron* 编辑文件: vim /et ...
- 互斥锁的robust属性的介绍和使用
一个具体的场景:在多线程中,当一个线程获得锁之后异常退出后,应该怎么处理? 方案一 使用锁的robust特性 简单地讲,就是当拥有这个锁的线程挂了后,下一个尝试去获得锁的线程会得到EOWNWERDEA ...
- Alpha项目测试--个人第五次博客
第五次个人博客--测试 这个作业属于哪个课程 系统分析与设计 这个作业的要求在哪里 Alpha项目测试 团队名称 西柚排课王 这个作业的目标 测试别人的项目,从客观的角度体验项目 一.测试项目一 团队 ...
- Vue基本用法
在学习Vue的基本用法之前,我们先简单的了解一些es6的语法 let: 特点:1.局部作用域 2.不会存在变量提升 3.变量不能重复声明 const: 特点:1.局部作用域 2.不会存在变量提升 3. ...