快速拖拽元素时如何避免dragend触发后又触发dragstart事件？

这是浏览器原生拖拽API的已知偶发边界问题：当用户拖拽速度过快时，元素的命中检测会短暂失效，第一次dragend触发后，浏览器会误判用户发起了新的拖拽动作，进而生成没有对应dragend的异常dragstart事件。

方案1：添加拖拽状态锁，拦截重复触发逻辑 #

新增状态变量标记当前是否处于拖拽中，仅首次触发dragstart时执行样式修改逻辑，异常的重复触发会被直接拦截：

let isDragging = false;

element.addEventListener('dragstart', (e) => {
  // 已有拖拽进行中，跳过异常的重复触发逻辑
  if (isDragging) return;
  isDragging = true;
  e.target.style.opacity = '0.4';
  // 其余拖拽初始化逻辑
});

element.addEventListener('dragend', (e) => {
  isDragging = false;
  e.target.style.opacity = '1';
});

方案2：添加多事件兜底重置逻辑 #

除了dragend外，额外监听mouseup、全局dragleave事件，只要鼠标释放或者拖拽离开视口就统一重置状态，避免dragend丢失导致的样式残留：

// 统一的状态重置函数
const resetDragState = (e) => {
  isDragging = false;
  e.target.style.opacity = '1';
};

element.addEventListener('mouseup', resetDragState);
// 拖拽离开文档视口时触发重置
document.addEventListener('dragleave', (e) => {
  if (e.clientX <= 0 || e.clientY <= 0 || e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) {
    resetDragState(e);
  }
});

方案3：CSS控制拖拽样式（更推荐） #

将拖拽状态的样式控制交给CSS，JS仅负责状态标记，完全避免JS事件配对异常导致的样式残留：

/* 用属性选择器匹配拖拽状态 */
.drag-item[dragging="true"] {
  opacity: 0.4;
  transition: opacity 0.1s;
}

对应的JS逻辑：

let isDragging = false;
const dragItem = document.querySelector('.drag-item');

dragItem.addEventListener('dragstart', (e) => {
  if (isDragging) return;
  isDragging = true;
  e.target.setAttribute('dragging', 'true');
});

const resetDrag = (e) => {
  isDragging = false;
  e.target?.removeAttribute('dragging');
};

dragItem.addEventListener('dragend', resetDrag);
dragItem.addEventListener('mouseup', resetDrag);

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