I'm trying to detect when the mouse is released over a certain html element. I would like the mouseup event to fire no matter where the dragging started initially. Here is my attempt, which behaves very weirdly (sometimes it fires, sometimes not, sometimes I get two alerts):
$("body").click(function() {
$(".cube").mouseup(function() {
console.log('mouseup')
});
});.box,
.cube {
background: rgb(255, 0, 0);
width: 100px;
aspect-ratio: 1;
display: inline-block;
}
.cube {
background: #222;
}<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="box"></div>
<div class="cube"></div>
</body>Problem number 2 demonstrated: the event is not firing after dragging starts from the upper div:
$(".cube").mouseup(function(){
console.log('mouseup')
}); .box{
background: rgb(255, 0, 0);
width: 200px;
height: 200px;
}
.cube{
background: #222;
width: 200px;
height: 200px;
}<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="box"></div>
<div class="cube"></div>
</body>It's even simpler than what you made. You just only need
<script>
$(".cube").mouseup(function(){
alert('mouseup')
});
</script>
If you release it, it means that you have clicked anywhere before