Tracking Mouse Events

Attempting to find a reliable way to determine if the mouse is no longer over a given element. If the mouse leaves the element after the mouse button is depressed, it should be detected by the document at once. My hope is to make the SVG Doodler II work around the bug that currently plagues it, namely that if the user leaves the canvas while the mouse is down, then reenters the canvas, the Doodler keeps drawing ad infinitum no matter what combination of mouse events are subsequently attempted.

by djwelsh

HTML

<div id="cont">
    <div id="controls"></div>
    <div id="canvas"></div>
</div>
<div id="debug"></div>

CSS

#debug {
    position: fixed;
    width: 500px;
    height: 50px;
    bottom: 0px auto;
    left: 0px;
}
#cont {
    position: relative;
    width: 500px;
    height: 400px;
    margin: 10px auto;
    outline: 1px dashed #ccc;
}
#controls {
    position: absolute;
    width: 50px;
    height: 400px;
    top: 0px;
    left: 0px;
    background-color: #eee;
}
#canvas {
    position: absolute;
    width: 450px;
    height: 400px;
    top: 0px;
    left: 50px;
    background-color: whitesmoke;
}

JavaScript

var mouseDown = 0;
document.body.onmousedown = function() { 
    mouseDown = 1;
}
document.body.onmouseup = function() {
    mouseDown = 0;
}

function checkIt (event) {
    if (!event) event = window.event;
    
    if (mouseDown == 1) {
        document.getElementById('debug').innerHTML = "mouse is down!";
    }
    else {
        document.getElementById('debug').innerHTML = "";
    }
}
document.getElementById('canvas').onmousedown = checkIt;
document.getElementById('canvas').onmouseup = checkIt;
document.getElementById('canvas').onmousemove = checkIt;
document.body.onmouseover = function (event) {
    if (!event) event = window.event;
    if (mouseDown == 1) {
        mouseDown = 0;
        checkIt();
    }
};