2

在 Safari 中，以下代码显示了拖放时按下的修饰键。但是在 Firefox 中，修饰键没有被注册。

测试代码，https://jsfiddle.net/omofkgdv/21/。

在此处输入图像描述

此处正在测试 Command 键，但没有任何修饰键（Shift、Alt、CTRL 或 Command）注册。

(function() {
  var element = document.getElementById("dropzone");
  var useCapture = true;
  
  dragHandler = function(e) {
    e = e || event;
    e.preventDefault();
    console.log("ctrl:" + e.ctrlKey + ", shift:" + e.shiftKey + ", alt:" + e.altKey + ", meta:" + e.metaKey + ", type:" + e.type);
    //console.log(e);
  }

  element.addEventListener("dragenter", dragHandler, useCapture);
  element.addEventListener("dragleave", dragHandler, useCapture);
  element.addEventListener("dragover", dragHandler, useCapture);
  element.addEventListener("dragexit", dragHandler, useCapture);
  element.addEventListener("dragend", dragHandler, useCapture);
  element.addEventListener("drop", dragHandler, useCapture);

}())
.dropzone {
  color:white;
  background-color:#2662ff;
  left:5px;
  right:5px;
  top:5px;
  bottom:5px;
  padding:5px;
  display:block;
  position:absolute;
}
.dropzone:-moz-drag-over {
  outline: 2px dashed black;
}
.dropzone:drag-over {
  outline: 2px dashed green;
}
.dropzone:dragover {
  outline: 2px dashed black;
}
<div id="dropzone" class="dropzone">Drop external file here</div>

OSX 10.11，火狐 58

重现步骤
1. 打开浏览器并将事件处理程序添加到文档（参见示例） 2. 打开 finder 并拖动文档或元素 3. 拖动时按住 shift、alt、ctrl 或命令键 4. 释放鼠标按钮

预期结果
事件反映按下的修饰键

实际结果
在特定测试中，如果事件修饰键值全部为假。请注意，如果窗口具有焦点，有时会显示修改键（需要更多测试才能正常工作）。请参阅 gif 和提供的示例链接。

4

0 回答 0