最近做项目经常在 chrome 的控制台看到如下提示： Unable to preventDefault inside passive event listener due to target being...treated as passive....所以为了让页面滚动的效果如丝般顺滑，从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive...： body { margin: 0; height: 2000px; background: linear-gradient(to bottom, red, green); } // 在...chrome56 中，照样滚动，而且控制台会有提示，blablabla window.addEventListener('touchmove', e => e.preventDefault()) 那么如何解决这个问题呢
谷歌浏览器的警告： [Intervention] Unable to preventDefault inside passive event listener due to target being treated...as passive....所以为了让页面滚动的效果如丝般顺滑，从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive...浏览器忽略 preventDefault() 就可以第一时间滚动了。...导致的问题： 浏览器在触发touchstart，touchmove事件的时候，e.preventDefault()会被浏览器忽略掉，并不会阻止默认行为。
翻译一下：chrome 监听touch类事件报错：无法被动侦听事件preventDefault，是新版本chrome 浏览器报错。...但是浏览器的控制台就会进行错误提醒了。...具体情况： 从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。...： body { margin: 0; height: 2000px; background: linear-gradient(to bottom, red, green); } // 在...chrome56 中，照样滚动，而且控制台会有提示，blablabla window.addEventListener('touchmove', e => e.preventDefault()) 那么我们这些小程序员该怎么办呢
passive: Boolean，设置为true时，表示 listener 永远不会调用 preventDefault()。...在Chrome中，wheel / touch 等事件中的 passive 会默认设置为true，但Safari不支持。...如果 passive 设置为true，而 listener 仍然调用了 preventDefault，则浏览器客户端将会忽略它，并抛出一个控制台警告： Unable to preventDefault...inside passive event listener invocation。...可能遇到的报错 Unable to preventDefault inside passive event listener due to target being treated as passive
16年 Google 推出了 passive 这个特性。如果你的 touch 事件不需要通过 preventDefault 来阻止事件的默认行为，那就可以添加 passive 参数，来提高滚动性能。...而加了 passive 之后，创建事件执行器的时候，就告诉了浏览器，我不会调用 preventDefault 来阻止事件。...大概意思是，在 Android 版 Chrome 浏览器的 touch 事件中，80% 的页面都不会调用 preventDefault 函数。...现在 Chrome 56 之后，会默认开启 passive，如果你在事件处理中使用了 preventDefault 而又没有指定 passive:false，就会有报错： [Intervention]...Unable to preventDefault inside passive event listener due to target being treated as passive 最后，送上一个
我用这个属性是因为自己在使用antd-mobile的走马灯时候，在控制台代码警告，内容是这样的： [Intervention] Unable to preventDefault inside passive...event listener due to target being treated as passive....css方式：比较简单 touch-action:none js方式：在touch的事件监听方法上绑定第三个参数{ passive: false } elem.addEventListener( '...通过调用禁用浏览器处理手势preventDefault()，但也应该使用触摸动作来确保浏览器在调用任何事件侦听器之前知道应用程序的意图。...我遇到这个问题的时候，第一感觉还是是否是脚本错误了，是否是兼容问题。如果是这样排查的话，就会浪费比较多的时间。甚至中间还找群友讨论，他们建议是否更换为绝对定位的方案，那样就真走偏了。
今天在写vue项目的时候碰到一个 Unable to preventDefault inside passive event listener due to target being treated...as passive....通过明确指定浏览器应该处理哪些手势，应用程序可以在 pointermove 和 pointerup 监听器中为其余的手势提供自己的行为。...使用 Touch_events 的应用程序通过调用 preventDefault() 禁用浏览器处理手势，但也应使用触摸操作确保浏览器在调用任何事件侦听器之前，了解应用程序的意图。...这意味着在实践中，触摸动作通常仅适用于具有某些自定义行为的单个元素，而无需在该元素的任何后代上明确指定触摸动作。 手势开始之后，触摸动作值的更改将不会对当前手势的行为产生任何影响。
前言 本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。...为了可以正确地处理这个事件，渲染进程会找到事件的目标对象（target）然后运行这个事件绑定的监听函数（listener）。...如果当前页面不存在任何用户事件的监听器（event listener），合成线程完全不需要主线程的参与就能创建一个新的合成帧来响应事件。...如果你之前从来没有想过为什么DevTools推荐你在事件监听器中使用 passive:true选项或者在script标签中写 async属性的话，我希望这个系列的文章可以给你一些关于浏览器为什么需要这些信息来提供更快更流畅的用户体验的原因...为你的站点添加Feature Policy 如果你想更进一步，你可以了解一下Feature Policy这个新的Web平台功能，这个功能可以在你构建项目的时候提供一些保护让您的应用程序具有某些行为并防止你犯下错误
在你的鼠标事件监听函数中使用 passive:true 意味着页面的滚动可以按照往常纵享丝滑般地去处理，你会为了限制滚动的方向调用 preventDefault ，但在这之前竖直的滚动就可能已经发生了。...为了减少主线程的负担，Chrome 将常见的连续事件进行了合并（比如 wheel、mousewheel、mousemove、pointermove、touchmove 等），并且在 requestAnimationFrame...如果你之前从来没有想过为什么官方推荐在你的事件处理函数中添加 passive 参数，或者不知道为什么在 script 标签上添加 async 属性，我希望这个系列能为你阐明为什么浏览器需要这些东西来提供更快...Chrome 的开发者工具团队有话说：通过 Chrome Devtools 优化网站性能[4]。 给网站添加 Feature Policy 如果你想更进一步，Feature Policy 了解一下？...这一策略会防止任何“脚本阻塞解析”的发生，浏览器就再也不用担心解析被阻塞这件事情了。 总结 当我在构建网站时，我通常只关注怎么写代码以及怎样才能让自己的效率变得更高。
Inside look at modern web browser 是介绍浏览器实现原理的系列文章，共 4 篇，本次精读介绍第四篇。...但还有一种方案是，告诉浏览器你不会 preventDefault()，这是因为 chrome 通过对应用源码统计后发现，大约 80% 的事件监听没有 preventDefault()，而仅仅是做别的事情...（后在 app 根节点）统一监听，这就导致了用户根本无从决定事件是否为 passive，如果框架默认 passive，会导致 preventDefault() 失效，否则性能得不到优化。...首先背景是，React 16 事件委托绑定在 document 上，React 17 事件委托绑定在 App 根节点上，而根据 chrome 的优化，绑定在 document 的事件委托默认是 passive...第一种方案是坚持 Chrome 性能优化的精神，委托时依然 pasive 处理。
Chrome51上使用Passive Event Listener特性前后的效果对比 链接地址：https://www.youtube.com/watch?...Passive Event Listeners是Chrome提出的一个新的浏览器特性：Web开发者通过一个新的属性passive来告诉浏览器，当前页面内注册的事件监听器内部是否会调用preventDefault...当属性passive的值为true的时候，代表监该听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动(passive)监听器。...在介绍Chrome浏览器的线程化渲染框架之前，我们先来简单了解本文涉及到的Chrome浏览器的一些概念。...在Chrome中，kBlocking和kBlockingAndPassive类型属性的处理逻辑是一样的，这个不难理解，只要存在一个非passive类型的事件监听器，那么都有可能阻止事件的默认行为。
Chrome51上使用Passive Event Listener特性前后的效果对比 链接地址 从效果对比视频中可以明显看到，使用Passive Event Listeners特性后，页面的滑动流畅度相对使用之前提升了很多...Passive Event Listeners是Chrome提出的一个新的浏览器特性：Web开发者通过一个新的属性passive来告诉浏览器，当前页面内注册的事件监听器内部是否会调用preventDefault...当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动(passive)监听器。...在介绍Chrome浏览器的线程化渲染框架之前，我们先来简单了解本文涉及到的Chrome浏览器的一些概念。...在Chrome中，kBlocking和kBlockingAndPassive类型属性的处理逻辑是一样的，这个不难理解，只要存在一个非passive类型的事件监听器，那么都有可能阻止事件的默认行为。
()); 这里要注意一个问题，在 chrome51 中在监听回调更新了参数，如果你不加上这个参数，那么可能这样并不能禁用页面滚动 具体如下 以前 addEventlisener 参数 是 target.addEventListener...(type, listener[, options]); 第三个参数变成了对象，包含一个属性 passive 这个参数主要是为了提高滚动流畅度 因为在一开始的时候，浏览器响应滚动 大概会有 200ms...的延迟 因为浏览器不知道监听的回调是否调用了 preventDefault 来取消滚动 所以只好等回调执行完毕，大概 200ms 后， 页面再开始响应滚动，所以会显得不那么跟手 现在通过 参数 passive...就可以事先告诉浏览器 这个监听回调不会 执行 preventDefault，你可以马上响应滚动不用等待 从而 提升了滚动的流畅度 但是 passive 是新出的标准，但是以前没有，所以我们需要做一个兼容...(), { passive: false} ); 但是这样就会把页面所有滚动都禁止 所以我们需要开放一个白名单，当滚动的元素在白名单之内，我们就放开限制 这个白名单的设置就是 给元素加上 can-scroll
mousewheel 事件 在 Stackoverflow 这个帖子 中说到：Chrome 下做无限滚动时可能存在加载时间变得超长的问题。...目前猜测因为 passive listener 的特性所引发的，帖子里也给出了解决方法：在 mousewheel 里 e.preventDefault 就好。...passive listener 上面提到了 passive listener，当监听器添加了 passive 属性 后，它就是 passive listener（被动监听器）。...的，因此在 mousewheelListener 里要做 isPassiveSupported 的判断，如果支持了 passive，就不执行 e.preventDefault。...还有一点，在添加 listener 的时候可以触发一次 listener 作为 initialLoad 向上滚动的时候，在 componentDidUpdate 里要把滚动条设置为上一次停留的地方，否则滚动条会一直在顶部
_scratch.bind(this), { passive: false }); + }, + _eventDown: function(e) { + e.preventDefault...知识点4：addEventListener第三个参数的passive属性 最开始，addEventListener() 的参数约定是这样的： el.addEventListener(type, listener...once: false, // 是否设置单次监听 passive: false // 是否让阻止默认行为preventDefault()失效 }) 三个属性的默认值都为 false...但是如果事件是 touchstart 或 touchmove的话，passive的默认值则会变成true（所以preventDefault就会被忽略了）。...在index.html的script里加入以下代码： + window.addEventListener('touchmove', function(e) { + e.preventDefault
、浏览器插件错误都会引起整个浏览器或当前运行的选项卡关闭。...当Chrome在强大的硬件上运行时，它可能会将每个服务拆分为不同的流程，从而提供更高的稳定性，但如果它位于资源约束设备上，Chrome会将服务整合到一个流程中，从而节省内存占用。...2) 函数节流：高频率事件(resize/scroll)为防止刷新间隔内多次执行函数，只执行一次更流畅，省开销。...(); }}); 解决方案 在事件监听器中传递 passive: true 选项，提示浏览器在主线程中监听事件，合成器线程也可以继续合成新帧。...(); }}, { passive: true}); 4.
、浏览器插件错误都会引起整个浏览器或当前运行的选项卡关闭。...当Chrome在强大的硬件上运行时，它可能会将每个服务拆分为不同的流程，从而提供更高的稳定性，但如果它位于资源约束设备上，Chrome会将服务整合到一个流程中，从而节省内存占用。...2) 函数节流：高频率事件(resize/scroll)为防止刷新间隔内多次执行函数，只执行一次更流畅，省开销。...(); } }); 解决方案 在事件监听器中传递 passive: true 选项，提示浏览器在主线程中监听事件，合成器线程也可以继续合成新帧。...(); } }, { passive: true }); 4.
二、项目所需要到的知识点 由于是在移动端，H5 , C3 ， 事件处理还有性能优化考虑的问题要更多 基础知识点 主打音乐类APP,需要使用到的H5标签， 等 C3技术...setState的异步同步问题，其实就是上面的事件机制，这个问题遇到的还是非常多的，如果搞不懂，那么调试起来非常困难 React中追求组件化，个人喜欢组件化到极致，这样方便调试，在使用TS和React...三、移动端的不一样 滑动时页面警告 [Intervention] Unable to preventDefault inside passive event listener due to target...being treated as passive....在http通信时，如果要将返回的数据setState，那么请注意setState的同异步场景，准确把控渲染和设置状态时间差逻辑，特别是多个请求，可以使用`promise.all 或者在setState的回调函数中发送请求
图4：在覆盖整个页面的非快速可滚动区域进行输入 为了缓解这种情况，你可以在事件侦听器中传递passive:true选项。 这向浏览器提示你仍然希望在主线程中监听事件，同时合成器也可以继续并合成新帧。...在鼠标事件中使用 passive:true 选项意味着可以平滑滚动页面，但是在你想要用preventDefault 来限制滚动方向时，垂直滚动可能已经开始了。...图7：充斥在帧时间线上的事件导致页面闪烁 为了最大限度地减少对主线程的过度调用，Chrome会合并连续事件（例如wheel, mousewheel, mousemove, pointermove, touchmove...如果你从未想过为什么"开发者工具"建议在你的事件处理中添加{passive: true}或者为什么你可以在脚本标记中编写async属性，我希望本系列能够说明为什么浏览器需要这些信息来提供更快更顺畅的体验...启用功能策略可确保应用的某些行为并防止你出错。 例如，如果要确保应用永远不会阻止解析，或者可以在同步脚本策略上运行应用。
// 每日前端夜话 第439篇 // 正文共：1600 字 // 预计阅读时间：8 分钟 在 Chrome 的 DevTools 中的控制台提供了一些 Debug 专用的函数，每一个都身怀绝技。...配合 demo 代码学习效果更佳，代码获取方式请看文末～ Console Utility Functions 这些函数只能用在 Chrome 的 console 中。...当我在第一次看到这些函数时非常兴奋，把它们直接写到了自己的代码中，结果当然是跳出了各种 Uncaught ReferenceError：xxx is not defined 错误。...展开的话可以看到监听器的各种属性： listener：触发事件执行的函数 once：该监听器只会触发一次 passive：无法执行event.preventDefault()，通常用于提升监听器的性能，...const options: { capture: true, passive: true, once: false } window.addEventListener('click', console.log
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
