JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.canvas, .console {
    background: #ccc;
    border: 2px solid #999;
    padding: 40px;
    margin: 20px;
}

.console {
    background: #fff;
}











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

JavaScript

var canvas = document.getElementsByClassName('canvas')[0],
    console = document.getElementsByClassName('console')[0]
    mouseDown = false;

canvas.addEventListener('mousedown', function(){
    mouseDown = true;
    log();
});
    
document.body.addEventListener('mouseup', function(){
    mouseDown = false;
    log()
});

function log(){
    console.innerHTML += 'Mouse is ' + (mouseDown ? 'down' : 'up') + '<br />';
}