JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="element"><!--start mousedown in here-->ffsdffdsf</div>
</div>

CSS

#container{
    width: 400px;
    height:400px;
    border: 2px solid silver;
}
#element{
    width:200px;
    height:200px;
    margin: 100px;
    border: 1px solid black;
}

JavaScript

$(document).ready(function(){
    var startMouseDownElement = null;
    
    $('#element').mousedown(function(){
        // do whatever
        //...
        
        // set mousedown start element
        startMouseDownElement = $(this);
    });
    
    // handle bad mouseup
    // $('#container, #container *').mouseup would be more efficient in a busy DOM
    $('body *').mouseup(function(event){
        event.stopPropagation(); // stop bubbling
        if($(this).attr('id') != $(startMouseDownElement).attr('id')){
            //oops, bad mouseup
            alert('bad mouseup :(');   
        }
    });
});