拖拽DOM元素时检测按键：WYSIWYG编辑器旋转功能实现疑问

问题 #

开发WYSIWYG编辑器时，需要实现拖拽元素过程中按下“r”键触发旋转功能，但发现拖拽期间keydown事件无法被触发。以下是可复现问题的示例代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div draggable="true">Drag this and then try to press some keys</div>
<script>
    document.addEventListener('keydown', function(event) {
    console.log(`Key pressed: ${event.key}`);
});

    document.addEventListener('mousedown', function(event) {
    console.log(`Mouse button pressed: ${event.button}`);
});
</script>
</body>
</html>

请问在DOM中是否可以实现拖拽时检测按键的功能，还是这是不可避免的限制？

回答 #

这不是DOM的不可避免限制，有两种可行方案实现拖拽时的按键检测：

1. 自定义拖拽逻辑（替代原生拖拽API） #

原生HTML5拖拽API在拖拽过程中会接管事件焦点，导致keydown事件无法正常触发。可以放弃draggable="true"，用mousedown、mousemove、mouseup手动实现拖拽逻辑，这样就能正常监听键盘事件：

const draggableEl = document.querySelector('div');
let isDragging = false;

draggableEl.addEventListener('mousedown', (e) => {
  isDragging = true;
  console.log(`Mouse button pressed: ${e.button}`);
  // 记录初始偏移量，避免元素跳变
  const offsetX = e.clientX - draggableEl.getBoundingClientRect().left;
  const offsetY = e.clientY - draggableEl.getBoundingClientRect().top;

  document.addEventListener('mousemove', moveHandler);
  function moveHandler(e) {
    draggableEl.style.position = 'absolute';
    draggableEl.style.left = `${e.clientX - offsetX}px`;
    draggableEl.style.top = `${e.clientY - offsetY}px`;
  }

  document.addEventListener('mouseup', () => {
    isDragging = false;
    document.removeEventListener('mousemove', moveHandler);
  });
});

// 拖拽期间可正常监听按键
document.addEventListener('keydown', (event) => {
  if (isDragging && event.key === 'r') {
    console.log('触发旋转');
    // 这里添加旋转逻辑，比如修改transform: rotate()
  }
  console.log(`Key pressed: ${event.key}`);
});

2. 结合原生拖拽API与全局按键状态 #

如果必须使用原生拖拽API，可以通过全局变量记录按键状态，在drag事件中检查状态：

let isRKeyPressed = false;

// 拖拽前后记录按键状态
document.addEventListener('keydown', (event) => {
  if (event.key === 'r') {
    isRKeyPressed = true;
  }
});

document.addEventListener('keyup', (event) => {
  if (event.key === 'r') {
    isRKeyPressed = false;
  }
});

const draggableEl = document.querySelector('div');
draggableEl.addEventListener('drag', () => {
  if (isRKeyPressed) {
    console.log('拖拽中按下r键，触发旋转');
    // 执行旋转逻辑
  }
});

这种方式的局限性是：拖拽过程中按下/松开按键的事件不会被捕获，但可以通过keyup重置状态，保证逻辑的准确性。

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