在外部拖放到窗口期间,Firefox Mac中没有注册修改键

时间:2018-01-26 00:44:49

标签: javascript firefox html5-draggable

在Safari中,以下代码显示了拖放时按下的修改键。但在Firefox中,修改键未被注册。

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

enter image description here

此处正在测试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,Firefox 58

重现的步骤
1.打开浏览器并向文档添加事件处理程序(参见示例) 2.打开取景器并拖动文档或元素 3.拖动按住shift,alt,ctrl或命令键 4.释放鼠标按钮

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

实际结果
在特定测试中,事件的修饰键值都是false。请注意,如果窗口具有焦点,则修改键有时会显示(需要对其工作时进行更多测试)。请参阅gif并链接到提供的示例。

0 个答案:

没有答案