How do I handle a right click event in Blazor (client side/WASM) without showing the typical browser context menu?

Question

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

Saucepan

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

May be with @onmousedown instead – Rabah

Is that Jquery/JS prevent right click menu in browsers help you – Rabah

Or this repo – Rabah

Thanks agua from mars! That's the same conclusion I came to. – Saucepan

Answer 1

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

Unprofitable

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. – Kew

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. – Aleron

Answer 2

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.

Saucepan

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. – Eichmann

Answer 3

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

Cordellcorder

if you are wondering if this is the case for you, just click on "Inspect" and see which element is selected for inspection(highlighted). – Germanous

Answer 4

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

   }
}

Tangible

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. – Griffey

Answer 5

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>

Germanous