如何在与 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">

    [...]

</div>

@code 

{

    private async Task MouseWheelEventHandler()

    {

        System.Console.WriteLine("Scroll");

    }

}

小提琴