@ondblclick event in Blazor also fires 2 single click events

Question

Consider the following in Blazor WebAssembly:

<span @onclick="Click" @ondblclick="DoubleClick">Click Me!</span>

@code {

    private void Click()
    {
        Console.WriteLine("Click");
    }

    private void DoubleClick()
    {
        Console.WriteLine("Double-click");
    }
}

If I double-click the element, what I'll see in the console is:

Click
Click
Double-click

Is there a way to receive the double-click event without it triggering 2 single click events? I want to use both events for different purposes and they are interfering with each other because of this.

Any suggestions much appreciated.

Answer 1

This is probably because of how the ondblclick event works. Quoting from MDN: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondblclick

The dblclick event is raised when the user double clicks an element. It fires after two click events.

So what you are seeing is the way it works :\

So you might have to trigger the single-click action after a small delay, if no double-click event occurs within that time.