相关疑难解决方法(0)

当用户更改页面中的缩放时,是否可以使用JavaScript检测？我只是想捕捉一个"缩放"事件并对其做出响应(类似于window.onresize事件).

谢谢.

在努力提高渐进式网络应用程序的性能的同时,我遇到了一个新功能Passive Event Listeners,我发现很难理解这个概念.

什么是Passive Event Listeners,什么是需要有它在我们的项目？

我使用了一个Angular 4项目@angular/cli,在开发模式下运行应用程序时,我在控制台中收到了这些警告:

zone.js:1489 [Violation] 'setTimeout' handler took 209ms
2[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
2zone.js:1157 [Violation] …

最近Chrome开始发出以下警告:

[违规]为滚动阻止"touchmove"事件添加了非被动事件监听器.考虑将事件处理程序标记为"被动"以使页面更具响应性.请参阅https://www.chromestatus.com/feature/5745543795965952

这些来自JavaScript Google Maps API代码.我可以在我自己的代码中添加{passive:true}到addEventListener(),但是不知道如何在Googles库中禁止警告？

被动事件侦听器是DOM规范中的一项新功能，使开发人员可以使用简单的javascript代码来提高滚动性能，如下所示：

document.addEventListener('touchstart', handler, {passive: true});

有没有办法在jQuery函数.on（）上传播此功能，或者唯一的解决方案是将所有jQuery .on（）迁移到addEventListener？

点击选择标记显示此警告:

[违规]为滚动阻止"鼠标滚轮"事件添加了非被动事件监听器.考虑将事件处理程序标记为"被动"以使页面更具响应性.

问题是,这也扩大了谷歌Chrome中HTML页面的高度.在Chrome版本59.0.3071.86(官方版本)(64位)中测试在Firefox中,这不会发生.

简单的代码:https: //jsfiddle.net/gurigraphics/2399mnyb

<div>
    <select>
        <option>Option</option>
    </select>
</div>

如果您自定义滚动条,"鼠标悬停"也会发生相同的情况.

什么是更好的解决方案？我找到了这个理论:https: //github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

我正在使用Chrome版本:Version 55.0.2883.75 beta (64-bit)带有+ 版本的material-ui(https://github.com/callemall/material-ui)版本0.16.5,当我使用鼠标滚轮向下滚动页面时,注意到以下警告消息:reactreact-dom15.4.1

由于主线程忙,"wheel"输入事件的处理延迟了xxx ms.考虑将事件处理程序标记为"被动"以使页面更具响应性.

以下是chrome dev控制台的屏幕截图:

最初,我认为另一个依赖react-waypoint导致问题,但经过一些调查,并感谢lencioni在https://github.com/brigade/react-waypoint/issues/143的跟进,我意识到这可能是由于react与最新版本的组合material-ui.

使用material-ui版本0.16.5,wheel可以从Chrome的开发工具元素选项卡中看到事件监听器,如下所示: 具有passive: false可以解释为什么在主线程忙时滚动时警告出现在控制台上的属性.

但是,通过阅读类似的帖子 考虑将事件处理程序标记为"被动"以使页面更具响应性,我有点困惑,因为它表明我们可能必须等待你的.js库来实现支持.在github提出问题之前提出这样的改进之前,令我困惑的是,我们应该等待哪些JS库/依赖？

在这种特殊情况下,是吗react(见讨论)？还是material-ui？或者这个问题完全错过了什么？上面的截图显示,wheel事件侦听器被添加ReactEventListener的react-dom,但在降级material-ui版本0.16.4,警告会消失,因为没有wheel事件侦听器.

所以我基本上是在浏览器react和第三方依赖的十字路口,并试图理解导致这个问题的变量,作为这些库的消费者,我们是否有办法解决这个问题？

任何建议或意见将非常感谢!谢谢.