JavaScript中dragstart触发后鼠标事件监听器失效问题解决

问题原因 #

HTML5原生拖拽的dragging阶段，浏览器会拦截常规鼠标事件（比如mouseup），转而触发专属的拖拽事件序列，导致你绑定的mouseup事件在拖拽过程中无法触发。

解决方案 #

通过监听拖拽专属事件和右键菜单事件，结合拖拽状态标记来实现需求：

修改后的完整代码 #

JavaScript

const boxes = document.getElementsByClassName("box");
const ball = document.getElementById("ball");

for (var i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("dragover", function(event) {
    event.preventDefault();
  });
  boxes[i].addEventListener("drop", function(event) {
    event.preventDefault();
    this.appendChild(ball);
  });
}

var originalBox;
let isDragging = false;
ball.setAttribute("draggable", true);

ball.addEventListener("dragstart", function(event) {
  originalBox = ball.closest(".box");
  isDragging = true;
});

ball.addEventListener("dragend", function(event) {
  isDragging = false;
  // 兜底处理：右键触发拖拽结束时放回原位置
  if (event.button === 2) {
    originalBox.appendChild(ball);
  }
});

// 拦截拖拽时的右键菜单，触发放回操作
document.addEventListener('contextmenu', (event) => {
  if (isDragging) {
    event.preventDefault();
    originalBox.appendChild(ball);
    isDragging = false;
  }
});

CSS

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

#ball {
  width: 90px;
  height: 90px;
  border-radius: 100%;
  background-color: DodgerBlue;
}

HTML

<div class="box">
  <div id="ball"></div>
</div>
<div class="box">
</div>
<div class="box">
</div>

关键改动说明 #

1. 添加拖拽状态标记：用isDragging变量区分当前是否处于拖拽状态，避免非拖拽场景下的右键误操作。
2. 监听dragstart与dragend：在拖拽开始时记录小球的原始容器，结束时重置状态；同时在dragend中判断是否为右键触发的结束，做兜底处理。
3. 拦截contextmenu事件：拖拽过程中右键点击会触发该事件，此时阻止默认右键菜单弹出，并将小球放回原始容器，同时重置拖拽状态。

这样修改后，拖拽小球时右键点击即可立即将其放回初始盒子，符合预期效果。

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