如何在Blazor（客户端/WASM）中处理右键单击事件，而不显示典型的浏览器上下文菜单？

Question

如何在Blazor（客户端/WASM）中处理右键单击事件，而不显示典型的浏览器上下文菜单？

contextmenublazorright-clickblazor-client-side

12

HandleClick似乎只能处理左键点击，但是我可以使用onmouseup和MouseEventArgs.Button属性来检测右键点击。问题是，通常由浏览器提供的上下文菜单会出现。有没有方法可以防止这种情况发生？在Blazor中我没有看到类似于preventDefault()的东西。
更新：显然我们可以使用@onmouseup:preventDefault，但是上下文菜单仍然会显示。

- Scott Reece

更新：显然我们可以使用 @onmouseup:preventDefault，但上下文菜单仍然会显示。 - Scott Reece

可能使用@onmousedown代替。 - agua from mars

1

这个 Jquery/JS 阻止浏览器右键菜单是否对您有帮助？ - agua from mars

请查看此仓库。 - agua from mars

谢谢来自火星的agua！这正是我得出的相同结论。 - Scott Reece

5个回答

10

好的，我想通了：

<div oncontextmenu="return false;" @onclick="HandleClick" @onmouseup="HandleMouseUp" >
    this is a div
</div>
@code {

    void HandleClick(MouseEventArgs args)
    {
        Console.WriteLine("This is a left click");
    }

    void HandleMouseUp(MouseEventArgs args)
    {
        if (args.Button == 2)
            Console.WriteLine("This is a right click");
    }
}

关键在于 div 自身的 oncontextmenu="return false;" JavaScript。

- Scott Reece

谢谢，我需要这个！不过我有一个小备注。你现在不必处理@onclick事件。两个按钮都可以在HandleMouseUp处理程序中处理。 - goodfellow

5

感谢提供的信息，它对我很有帮助

对于任何使用此功能的人，我有一个小技巧：我使用一个带有标签的div来创建自己的上下文菜单组件，并且发现默认的上下文菜单仍然会偶尔出现，例如如果我双击鼠标右键或按住右键太久。后来发现原来是右键点击在我的菜单组件上了，而这导致默认菜单显示在当前鼠标位置上方。因此，在我的菜单组件中添加oncontextmenu="return false;"也是必要的，以完全停止它。

分享一下，因为花费了我太长时间才搞清楚为什么它仍然会弹出来

- Scott

如果你想知道是否适用于你，只需点击“检查”并查看哪个元素被选择以进行检查（突出显示）。 - RoJaIt

0

我有一种方法，只使用一个方法就可以解决问题

<button class="btn btn-primary" @oncontextmenu:preventDefault="true"
    @onclick="args => ChangeCount(args)"
    @oncontextmenu="args => ChangeCount(args)">
Click

@code{
   private int currentCount = 0;
   private void ChangeCount(MouseEventArgs e)
   {
       currentCount = e.Button == 0 ? currentCount + 1 : currentCount - 1;
       Console.WriteLine(e.Button);

   }
}

- spooch

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

0

我的方法是基于Scott的答案：

我正在使用radzen blazor上下文菜单。因此，我无法直接向上下文菜单添加属性。我希望能够将属性添加到在MainLayout.razor中添加的服务组件中。但是这样做不起作用，ContextMenuService会在body标签的末尾创建一个新的div。

由于我时间非常紧张，并且我不是在开发商业应用程序，所以我决定完全禁用默认的上下文菜单。这也意味着您无法使用"Inspect"，也无法使用上下文菜单从文本字段复制和粘贴值。

如果您对这些缺点没有意见：

请修改index.html文件如下：

<body oncontextmenu="return false;" oncontextmenu:preventDefault>

- RoJaIt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- oiBio · Accepted Answer

您可以直接在Blazor中使用@oncontextmenu。与@oncontextmenu: preventDefault="true"结合使用时，它不会显示上下文菜单。

<div @onclick="HandleClick" @oncontextmenu="HandleRightClick" @oncontextmenu:preventDefault="true" >
    this is a div
</div>

@code {

    void HandleClick(MouseEventArgs args)
    {
        Console.WriteLine("This is a left click");
    }

    void HandleRightClick(MouseEventArgs args)
    {
        if (args.Button == 2)
            Console.WriteLine("This is a right click");
    }
}