拖拽操作通过Escape键取消时，是否存在对应的浏览器事件？

直接利用HTML5原生拖拽API的专属事件，就能覆盖所有拖拽取消场景（Escape键取消、无效区域松开鼠标取消），完全不用额外监听keyup或mouseup：

1. 用dragcancel处理主动/浏览器触发的取消 #

dragcancel是专门针对拖拽取消的原生事件，会在以下场景触发：

• 用户按下Escape键主动终止拖拽
• 拖拽元素被拖出浏览器窗口，被浏览器判定为取消操作

在事件回调里直接执行撤销预览的逻辑：

const draggable = document.querySelector('.draggable');
const removeDragPreview = () => {
  // 这里写你的撤销逻辑：比如隐藏预览元素、重置样式等
  const preview = document.getElementById('drag-preview');
  preview?.remove();
};

draggable.addEventListener('dragcancel', removeDragPreview);

2. 用dragend配合状态判断处理无效区域取消 #

当用户在非可放置目标区域松开鼠标时，dragcancel不会触发，但dragend会在所有拖拽操作结束时触发（无论成功还是取消）。此时可以通过dataTransfer.dropEffect判断拖拽结果：如果值为'none'，说明拖拽未找到有效放置目标，属于取消操作，这时就可以撤销预览：

draggable.addEventListener('dragend', (e) => {
  if (e.dataTransfer.dropEffect === 'none') {
    removeDragPreview();
  }
});

完整代码示例 #

把两个事件结合，就能覆盖所有取消场景：

const draggable = document.querySelector('.draggable');

function removeDragPreview() {
  const preview = document.getElementById('drag-preview');
  if (preview) {
    preview.remove();
  }
  // 也可以添加其他重置逻辑，比如恢复原元素样式等
}

// 处理Escape键、拖出窗口的取消场景
draggable.addEventListener('dragcancel', removeDragPreview);

// 处理在无效区域松开鼠标的取消场景
draggable.addEventListener('dragend', (e) => {
  if (e.dataTransfer.dropEffect === 'none') {
    removeDragPreview();
  }
});

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