拖拽元素后重新绑定click事件立即触发的问题排查

问题原因 #

浏览器的事件触发序列是：mousedown → mousemove（拖拽时多次触发）→ mouseup → click。你在mouseup的回调函数closeDragElement中重新绑定了click事件，而此时浏览器的事件队列里已经有待触发的click事件，新绑定的click回调会被这个后续事件直接触发，导致刚绑定就弹出alert。

解决方案 #

不需要反复解绑/绑定click事件，而是通过标记拖拽状态来控制click事件是否执行，这样更简洁且避免事件时序问题：

修改后的完整代码如下：

const myDiv = document.getElementById("mydiv");
let isDragging = false;

// 初始化点击事件，通过状态判断是否执行
myDiv.onclick = function() {
    if (!isDragging) {
        alert("click");
    }
};

dragElement(myDiv);

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  const header = document.getElementById(elmnt.id + "header");
  (header || elmnt).onmousedown = dragMouseDown;

  function dragMouseDown(e) {  
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    isDragging = false; // 初始按下时还未拖拽
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    isDragging = true; // 触发拖拽，标记状态
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
    // 延迟重置状态，避免快速点击误判（可选，根据需求调整）
    setTimeout(() => {
        isDragging = false;
    }, 100);
  }
}

#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

<div id="mydiv">
  <div id="mydivheader">click OR drag</div>
</div>

核心逻辑说明 #

• 新增isDragging变量标记是否处于拖拽状态
• 点击事件始终存在，仅当isDragging为false时才执行alert
• 按下鼠标时初始化状态为未拖拽，触发mousemove时标记为已拖拽
• 拖拽结束后延迟重置状态，避免快速点击被误判为拖拽后的无效点击（可根据需求调整延迟时间或移除）

内容的提问来源于stack exchange，提问作者Detlev Spinell