Home/ Questions/Q 8255127
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T01:25:15+00:00

I have simple Javascript code, similar to this one: var mouseIsDown = false; …

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0