在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,Firefox 58
重现的步骤
1.打开浏览器并向文档添加事件处理程序(参见示例)
2.打开取景器并拖动文档或元素
3.拖动按住shift,alt,ctrl或命令键
4.释放鼠标按钮
预期结果
事件反映了按下的修饰键
实际结果
在特定测试中,事件的修饰键值都是false。请注意,如果窗口具有焦点,则修改键有时会显示(需要对其工作时进行更多测试)。请参阅gif并链接到提供的示例。