How to catch mouse-up event outside of element?

I have simple Javascript code, similar to this one:

var mouseIsDown = false;
...
function canvasMouseDown(e) {
  ...
  mouseIsDown = true;
}
function canvasMouseUp(e) {
  mouseIsDown = false;
}
function canvasMouseMove(e) {
  if (mouseIsDown) {
    ...
  }
}

with implemention my own user interface for tranformations (translations, scalings and rotations) with canvas.

Such implementation within canvasMouseMove() function check mouseIsDown variable. All works fine if user does not release mouse button when the cursor/pointer is outside of the canvas element. If that happen, the variable mouseIsDown stays true and is not turned off by canvasMouseUp function.

What is easy fix or solution in pure JavaScript (no jQuery) for this issue?

If you want to catch the mouseup event somewhere else in the document, you might add an event handler for this to the documentelement. Note that this won't react on mouseup events outside the viewport, so you might want to fire also when the mouse enters the viewport again without a pressed button.

If you want to catch the mouse leaving your canvas element, it gets a bit more complicated. While IE knows a mouseleave event, the standard DOM has a mouseout event that also fires when a descendant of your element is left (although canvas usually has no child elements). Read more on that at quirksmode.org.

I have created a fiddle to demonstrate the behaviour (works only with W3 DOM). You might try to change documentelement to body. In Opera, the mouseup listener on <html> event detects mouseup events outside the document when the "drag" began inside it - I do not know whether that is standard behaviour.

window.addEventListener('mouseup', function(event){
// do logic here
})

It handle releasing mouse even outside of browser

document.onmouseup will be thrown even outside the viewport, that's a nice-to-know you only get by binding to the document object. test here: http://jsfiddle.net/G5Xr2/

$(document).mouseup(function(e){
  alert("UP" + e.pageX);
});

It will even receive the mouse position!

Add a higher-level event handler (perhaps to the body) that catches the mouseUp event, and sets mouseIsDown to false.

Here's a demo: http://jsfiddle.net/ZFefV/

How to catch mouse-up event outside of element?

Related

Recent Posts