# Spot the bug - #111: Drag Handle

**URL:** <https://forum.kirupa.com/t/spot-the-bug-111-drag-handle/682995>\
**Category:** web dev\
**Created:** [August 9, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-111-drag-handle/682995 "2026-08-09T07:00:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [August 9, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-111-drag-handle/682995/1 "2026-08-09T07:00:12Z")

</div>

Drag handle works once then completely stops responding, help

```js
const handle = document.querySelector('.drag-handle');
const box = document.querySelector('.box');

function onDrag(e) {
  box.style.left = e.clientX + 'px';
  box.style.top = e.clientY + 'px';
}

handle.addEventListener('mousedown', () => {
  document.addEventListener('mousemove', onDrag);
  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', onDrag);
  });
});

```

Reply with what is broken and how you would fix it.

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [August 10, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-111-drag-handle/682995/2 "2026-08-10T07:20:21Z")

</div>

New mouseup listener gets added every single mousedown, they never get cleaned up so they stack up and start fighting each other. Only the first one actually manages to remove the mousemove listener since it’s referencing the same `onDrag` function reference, the rest are just dead listeners doing nothing. Pull the mouseup handler out to a named function and add/remove it the same way you do with `onDrag`, that’s the actual fix here. Rebinding closures inside a mousedown handler is asking for this exact bug.

---

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [August 10, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-111-drag-handle/682995/3 "2026-08-10T08:00:16Z")

</div>

**Spot the Bug answer:** A new mouseup listener (with a new anonymous function reference) is added on every mousedown, so removeEventListener never actually matches a previously added listener, but more importantly listeners pile up and only the closures created during the very first drag properly reference onDrag, leaving stale duplicate mouseup handlers that no longer clean up correctly after the first drag.

**The fix:**

```javascript
Define the mouseup handler as a named function once outside mousedown, and use document.addEventListener('mouseup', onDragEnd) / removeEventListener('mouseup', onDragEnd) instead of creating a new anonymous function inside mousedown each time.

```

**Why:**  
Each mousedown registers a brand new anonymous mouseup callback, so the handlers accumulate instead of being properly removed, and because addEventListener/removeEventListener require the same function reference, the drag state becomes inconsistent after the first use. This causes the handle to stop responding correctly on subsequent drags.

**First-answer leaderboard**

1. @kirupa - 3 (firsts) 🏆
2. @emmawalter5 - 1 (first)