如何在与 Firefox 浏览器一起使用的 Blazor 中绑定鼠标滚轮事件

Question

我们想要为 div 容器上的鼠标滚轮事件编写代码。使用以下代码在浏览器 Edge 和 Chrome 中运行良好：

<div id="scroll-container" @onmousewheel="MouseWheelEventHandler">

    [...]

</div>

@code 

{

    private async Task MouseWheelEventHandler()

    {

        System.Console.WriteLine("Scroll"); // works in Chrome and Edge, but not in FF

    }

}

但MouseWheelEventHandlerFirefox 中没有触发。

关于这篇使用 JavaScript 的文章，我们必须通过 绑定鼠标滚轮DOMMouseScroll。（DOMMouseScroll已弃用，wheel将来会完成这项工作）。这篇文章是 JavaScript 的解决方案，但不是 blazor。

document.getElementById("scroll-container").addEventListener("DOMMouseScroll", function(){...}, false);

如何在 Blazor Web Assembly 中绑定 FF 的鼠标滚动事件？

Answer 1

对于 Firefox，您必须添加 onwheel 事件：<div id="scroll-container" @onmousewheel="MouseWheelEventHandler" @onwheel="MouseWheelEventHandler">&nbsp; &nbsp; [...]</div>@code&nbsp;{&nbsp; &nbsp; private async Task MouseWheelEventHandler()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; System.Console.WriteLine("Scroll");&nbsp; &nbsp; }}小提琴