Question

Currently I’m creating an web application with KineticJS, which includes dragging and dropping on a canvas. It works perfectly fine, when you keep your mouse inside your canvas.

However, if you leave the canvas, with your left mouse button pressed, you will select everything on the page. Is possible to intercept that event in some way. Obviously onselect is something else :p

Answer 1

I encapsulated the canvas element into a div and then assigned the event handlers onto the div, the div covers 100% of the page’s layout like:

<div class="fillPage">
    <canvas id="Viewport"></canvas>
</div>

I also added event handlers for blur (page-leave) and the following css:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;