检测HTML5本地拖放期间的按键按下/松开事件

Question

我有一个可以使用原生 HTML5 拖拽的元素。它有 dragstart、drag 和 dragend 事件监听器。此外，我还在 document.body 元素上分配了 keydown 和 keyup 事件监听器。

当拖动可拖动元素时，ondrag 事件将按预期触发。当我在没有拖动任何东西时按下和释放任何键时，document.body 的 keydown/up 事件将触发。

然而，如果我在执行 ondrag 时按下/松开键，document.body 的 keydown/up 事件将不会触发。这里有什么解决方法或技巧吗？

- woran

---

你能提供一个例子或Fiddle吗？ - Rob W

请看这里：http://jsfiddle.net/SVArR/ - woran

我尝试了很多次，但在 Webkit 浏览器中，在普通拖动事件期间无法使用键盘事件。即使不绑定这些事件，键盘事件也无法被注册。 - Rob W

这可能是浏览器的一个 bug/特性。 - woran

我没有看到规范中说键盘按键应该被阻止。不过，我确实看到这是默认行为。真是个糟糕的惊喜 :) 为什么多年来都一直是这样呢？太糟糕了！ - SimplGy

Answer 1

回答自己的问题...来自于 拖放操作 - MDN:

在 dragenter 和 dragover 事件中，dropEffect 属性会被初始化为用户请求的效果。用户可以通过按下修饰键来修改所需效果。尽管使用的确切键因平台而异，但通常 Shift 和 Control 键用于在复制、移动和链接之间切换。

在 HTML5 的原生拖放中，触发任何操作的唯一按键是修饰键。在 Mac 上，它是选项键和控制键。操作是通过 event.dataTransfer.effectAllowed 捕获的，而不是 keypress 或 keydown 事件。

- woran