Blazor mouse events and mouse capture

Question

I'd like to create a panel with movable html elements using Blazor WebAssembly (for something similar like a workflow editor). Currently I have a <div> with position:absolute style as a movable object where I handle mouse events on it. It works, but as soon as the mouse goes out of this div or out of the browser window, events are not sent to the div anymore. I need to capture the mouse somehow so that events are sent to this div in all cases, even if mouse cursor is outside the browser window. How can I accomplish this? Maybe I need to handle the events on a document-level somehow, maybe using JS interop, I don't know.

Answer 1

As blazor always depends on json interop for events even for the builtin ones there is nothing wrong with your approach. You could make a generic blazor component for capturing window or root dom events.

Answer 2

I actually found a way using JSInterop. I have defined a custom JavaScript function in index.html that calls Element.setPointerCapture(). Is this the only way that this could be accomplished?