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

Question

我们想为 div 容器上的鼠标滚轮事件编写代码。使用以下代码在 Browsers 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
    }
}

但是 MouseWheelEventHandler 在 Firefox 中没有触发。

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

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

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

Answer 1

对于 firefox，您必须在 wheel 上添加事件：

<div id="scroll-container" @onmousewheel="MouseWheelEventHandler" @onwheel="MouseWheelEventHandler">
    [...]
</div>

@code 
{
    private async Task MouseWheelEventHandler()
    {
        System.Console.WriteLine("Scroll");
    }
}

Fiddle

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

How to bind mousewheel event in Blazor working with Firefox Browser

javascript

blazor

mousewheel

blazor-webassembly