JSFiddle - React, Tailwind, and code Playground

HTML

Click in this box, and release outside it:
<div id="canvas"></div>
<div id="console"></div>

CSS

div {
    border: 2px solid #999;
    padding: 40px;
    margin: 20px;
}

#canvas {
    background: #ccc;
}











body {
    -webkit-user-select: none;
}

JavaScript

var canvas = document.getElementById('canvas'),
    console = document.getElementById('console'),
    mouseDown = false;

canvas.addEventListener('mousedown', function(e){
    mouseDown = true;
    log("Mouse down (in canvas)");
});
document.documentElement.addEventListener('mouseout', function(e){
    var str = "pressed Mouse leaving ";
    if (mouseDown) {
        if (e.target == canvas)
            log(str+"canvas");
        if (e.target == this && e.relatedTarget == null)
            log(str+"document");
    }
});
 
document.documentElement.addEventListener('mouseover', function(e){
    if (e.target == this && e.relatedTarget == null) {
        // log ("mouse entering document");
        if (mouseDown && !e.button) {
            mouseDown = false;
            log("Mouse up (entering document without pressing button)");
        }
     }
});
document.documentElement.addEventListener('mouseup', function(e){
    mouseDown = false;
    var str = "Mouse up";
    if (e.target == canvas)
        str += " (even in canvas)";
    log(str)
}); 

function log(msg){
    console.innerHTML += msg + '<br />';
}