为滚动反应被动事件处理程序答案

【问题标题】：react passive event handler for a scroll为滚动反应被动事件处理程序
【发布时间】：2016-09-21 13:09:54
【问题描述】：

我的反应中有一个用于滚动的事件处理程序，我正试图使其被动。但它不起作用，我在控制台中不断收到此警告：

考虑将事件处理程序标记为“被动”以使页面更多反应灵敏。

所以这里是我阅读事件的地方：

bindEventListeners()
{
    EventContainer.readWindowEvent('scroll', this.onScroll);
}

这是我的 EventContainer.js 文件中的 readWindowEvent 函数：

static readWindowEvent(slug, callback, passive = true)
    {
        let result = null;

        let allowed = this.getAllowedWindowEventListeners().indexOf(slug) != -1;

        if (!allowed) {
            result = console.error(
                'You cannot register ' + slug + ' on the window. Allowed events: ' +
                this.getAllowedWindowEventListeners().join(', ')
            )
        }

        if (allowed) {
            result = window.addEventListener(
                slug,
                callback,
                {passive: passive}
            );
        }

        return result;
    }

在这一行：

{被动：被动}

我的编辑器出现以下错误：

参数类型 {passive: boolean} 不能分配给参数类型 boolean

有人知道我在这里做错了什么吗？

感谢任何帮助！

【问题讨论】：

把函数参数改成(slug, callback, passive)，把addEventListener()中的第三个参数改成{ passive: passive === true }
@Archer 不幸的是，这在我的编辑器中给出了同样的错误。我编译了我的反应并在我的控制台中做了一个 getEventListeners ，它仍然说被动：假：'（
抱歉没有帮助。我看不出代码有什么问题，如果你只是在浏览器控制台中用一个简单的 1-liner 来模仿它，它就可以正常工作。它可能是特定于 React 的，在这种情况下我无能为力。希望有人能来！

标签： javascript reactjs events event-handling dom-events

【解决方案1】：

现在回答可能有点晚了，但我遇到了同样的问题。一种解决方法是在传入的对象上使用any-type：

let passiveObject: any = { passive: true }
obj.addEventListener(evt, func, passiveObject)

希望这对将来的某人有所帮助！

【讨论】：

【解决方案2】：

没有任何理由让滚动监听器被动！请仔细阅读文档 - 滚动 div 中的任何触摸轮和点击侦听器都必须是被动的 - 这是被动侦听器的主要目标

【讨论】：

如果 div 没有滚动，而是被滚轮缩放了怎么办？像地图？在这种情况下，您当然希望在滚动事件上阻止默认值。