11

HandleClick seems to only handle left clicks, but it looks like I can use onmouseup and the MouseEventArgs.Button property to detect the right click.
The problem is that the typical browser-provided context menu comes up. Is there a way to prevent that? I don't see anything like preventDefault() in Blazor.

Update: apparently we can do @onmouseup:preventDefault but the context menu still shows

agua from mars
  • 16,428
  • 4
  • 61
  • 70
Scott Reece
  • 395
  • 1
  • 3
  • 13

5 Answers5

16

You can use the @oncontextmenu directly in blazor. combined with @oncontextmenu:preventDefault="true" it does not show the context menu.

<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");
    }
}
oiBio
  • 336
  • 2
  • 9
  • 1
    Using Microsoft Edge, if I change `oncontextmenu="return false;` to `@oncontextmenu:preventDefault` without using `@oncontextmenu`, the default right click dialog opens. So I think the Blazor one only works when using `@oncontextmenu` aswell. – devbf Sep 21 '20 at 10:06
  • Yes, this is what worked for me. I needed both an `@oncontextmenu` handler AND use `@oncontextmenu:preventDefault` to prevent the context menu from showing up. You don't need to add the `="true"` to it. You can also ignore using `@onclick` if you add an `if (args.Button == 0)` in the `@oncontextmenu` handler. – Jeff Peterson Apr 12 '21 at 00:34
10

OK, I figured it out:

<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");
    }
}

The key is the oncontextmenu="return false;" javascript in the div itself.

Scott Reece
  • 395
  • 1
  • 3
  • 13
  • Thanks, I needed this! I have a small remark though. You don't have to handle the @onclick event now. Both buttons can be handled in HandleMouseUp handler. – goodfellow Apr 09 '21 at 16:36
5

Thanks for the info it helped me a lot

Just a tip for anyone using this I made my own context menu component using a div with labels for menu items and was finding the default context menu would still show up occasionally on things like a double click with the right mouse button or if I held down the right mouse button for too long. turns out the right click was happening on my menu component and then showed the default menu, as it was shown over the current mouse position. so adding the oncontextmenu="return false;" to my menu component was also required to stop it completely.

just sharing as it took me too long to figure out why it was still coming up

Scott
  • 216
  • 3
  • 8
  • if you are wondering if this is the case for you, just click on "Inspect" and see which element is selected for inspection(highlighted). – RoJaIt Aug 03 '23 at 13:01
0

I have a way which will work using only the one method

<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
  • 21
  • 1
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 22 '22 at 15:43
0

My approach is based on Scott's answer:

I'm using the radzen blazor context menu. Because of that I'm not able to add the attributes directly to the context menu. I hoped I could add the attributes to the service component added within the MainLayout.razor. But this does not work the ContextMenuService creates a new div at the end of the body tag.

Since I'm on a very thight time budget and I'm not developing bussines app, I devided to disable the default context menu completely. This also means you cannot use "Inspect" and you also cannot use the context menu to copy and paste values from text fields.

If you are okay with the drawbacks:

Modify the index.html file like that:

<body oncontextmenu="return false;" oncontextmenu:preventDefault>
RoJaIt
  • 451
  • 3
  • 10