blazor - 桌面上的 Blazor 按钮 onclick 和移动设备上的 ontouchstart

Question

我正在使用 Blazor WebAssembly，我试图在网页上放置一个按钮，该按钮应该在使用鼠标的桌面浏览器以及使用触摸的移动设备中工作。但是，在移动设备上，我希望按钮立即响应触摸，而不是等待用户放手。

另外我需要确保它不会在移动设备上两次触发相同的代码，这就是我放入的原因preventDefault=true。

所以我想出了以下内容：

<button
    @onclick="e => ToggleFlag(flag)"                                                
    @ontouchstart="e => ToggleFlag(flag)"
    @ontouchstart:preventDefault=true>
        @flag.DisplayValue
</button>

我认为上面的代码可以工作，但不幸的是，当我模拟触摸事件时，Chrome 会响应以下“干预”：

blazor.webassembly.js:1 [干预] 由于目标被视为被动，因此无法在被动事件侦听器中阻止默认设置。见https://www.chromestatus.com/features/5093566007214080

经过更多的挖掘，我在这里和这里找到了一些有用的信息。

我从中得到的是，Blazor{passive: true}默认注册其触摸事件侦听器，这意味着 Chrome 将不允许使用preventDefault，据我所知，我无法告诉 Blazor 使用{passive: false}.

我还尝试@ontouchstart:preventDefault=true在将touch-action: none;样式应用于按钮时删除，这没有帮助，因为它只是导致两个听众都被调用。

这里有什么可能的解决方案？

谢谢！

附言。作为一种解决方法，我采取了复制按钮（每个按钮监听不同的事件）并使用 CSS 媒体查询来显示/隐藏相关按钮，具体取决于我们是处于桌面模式还是移动模式。不理想的 IMO，感觉有点像黑客。

标签： blazortouchtouch-eventblazor-webassemblypreventdefault