HTML Automatic selection of elements

[cbreemer]

EDIT - Please ignore this post. It's standard browser behavior, nothing to do with what I am doing in the page.
---------------------------------------------------------------------------------------------------------------------------

I have a little drawing project where a <canvas> is flanked by two <div>'s each showing some html.
When I am drawing on the canvas, i.e. moving around with it the mouse down, and the mouse moves outside the canvas, elements in one or both of the <div>'s get selected until the mouse moves back into the canvas again. Please see this Screen video for visual illustration. Note that in the <div> on the right, there seems to be an area that toggles the selection on and off. There's nothing in that location, the <div> just contains the single <table> , and the mouse is not in it.

I totally fail to understand why this is happening. Probably standard browser behavior but I think it's annoying.
Any ideas ?

 

[OldMan]

I think the easiest, and the thing I'd try first would be to make an invisible div to cover the screen and therefore your tables, and open the canvas on that.

 

[cbreemer]

I think the easiest, and the thing I'd try first would be to make an invisible div to cover the screen and therefore your tables, and open the canvas on that.

Yes that could be an idea, thanks. But now, in a sudden flash of inspiration, I thought of a much simpler solution :

window.addEventListener("mousemove", (e) => { e.preventDefault(); });