How does click event behavior work when dragging?

I'm experiencing unexpected behavior click and drag events between a div and the body in JavaScript.

Here's the behavior I'm seeing when I click and drag:

Start in the floating div, release in body → logs Body Event
Start and release in floating → logs Floating Event
Start in body, release in floating → logs Body Event
Start and release in body → logs Body Event

The surprising case is the third one: Why doesn't the click event fire on the floating div when I release the mouse over it, even though the mouseup happens on it?

Here's the setup:

document.getElementById('floating').addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('Floating Event');
});

document.body.addEventListener('click', () => {
  console.log('Body Event');
});

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.floating-object {
  position: absolute;
  top: 60px;
  left: 200px;
  width: 150px;
  height: 150px;
  background: orange;
  border-radius: 50%;
  z-index: 1002;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

<div class="floating-object" id="floating"></div>

Solution

The events are only raised for click events.

As stated by @importUserName, a click event will only occur if mousedown and mouseup occur on the same element. This is confused as mousedown/mouseup bubble up to parent elements (ie document) if not otherwise stopped.

To explain the why for each scenario:

Start in the floating div, release in body → logs Body Event

mousedown in the div - this propagates to mousedown in the body
mouseup in the body - combined with propagated mousedown -> click in body

Start and release in floating → logs Floating Event

"normal" click event - mousedown/up in the div -> click in the div

Start in body, release in floating → logs Body Event

mousedown in the body
mouseup in the div - this propagates to mouseup in the body -> mousedown + propagated mouseup in the body -> click in body

Start and release in body → logs Body Event

"normal" click event - mousedown/up in the body -> click in the body

Here is a basic example to illustrate the behavior between mousedown, mouseup, click while dragging. Click on elements (buttons/container) or click and drag between elements (buttons/container):

const log = (msg) => console.log(msg);

document.getElementById('btn1').addEventListener('mousedown', () => log('mousedown Button 1'));
document.getElementById('btn1').addEventListener('mouseup', () => log('mouseup Button 1'));
document.getElementById('btn1').addEventListener('click', () => log('click Button 1'));

document.getElementById('btn2').addEventListener('mousedown', () => log('mousedown Button 2'));
document.getElementById('btn2').addEventListener('mouseup', () => log('mouseup Button 2'));
document.getElementById('btn2').addEventListener('click', () => log('click Button 2'));

document.getElementById('container').addEventListener('mousedown', () => log('mousedown CONTAINER'));
document.getElementById('container').addEventListener('mouseup', () => log('mouseup CONTAINER'));
document.getElementById('container').addEventListener('click', () => log('click CONTAINER'));

body {
  background: #20262e;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}
#container {
  border: 2px solid black;
  padding: 20px;
  display: flex;
  gap: 20px;
}
button {
  padding: 20px;
  font-size: 16px;
}

<h2>Click and move mouse between buttons</h2>
<div id="container">
  <button id="btn1">Button 1</button>
  <button id="btn2">Button 2</button>
</div>