Question

我做错了什么？或者这是FireFox的错误吗？

我有最新版本的FireFox（嗯，截至目前，v55.0.3）。

我做了一段时间的这个测试，以获得HTML拖放的悬念。顶部的6个框可以相互拖动，每个不同的事件类型都在下面的自己的框中登录，并在第一个框中记录所有事件（以显示触发顺序）。

在Chrome中，＆＃39; dragenter＆＃39;当我开始拖动元素时，它在框中出现一次，但在FireFox中，它在框中出现两次。

发生了什么？

Here's a JSFiddle，以下是完整的来源：

<html><head>
<style type="text/css">
    .drag {width:200px; height:200px; margin:10px; float:left; overflow:hidden; font:bold 20pt arial; text-align:center}
    .drag:nth-child(2n) {background-color:#20E020}
    .drag:nth-child(2n+1) {background-color:#2020E0}
    #logs {position:absolute; bottom:0}
    .log {float:left; width:100px; height:80px; border:1px solid #a0a0a0; padding:10px; overflow:auto; color:#a0a0a0; font:normal 10pt arial}
    .log::first-line {color:black}
    #ALL {background-color:#e0e0e0}
</style>
</head><body>
<div class="drag" draggable="true"><p>0</p></div>
<div class="drag" draggable="true"><p>1</p></div>
<div class="drag" draggable="true"><p>2</p></div>
<div class="drag" draggable="true"><p>3</p></div>
<div class="drag" draggable="true"><p>4</p></div>
<div class="drag" draggable="true"><p>5</p></div>
<div id="logs">
    <div class="log" id="ALL"></div>
    <div class="log" id="click"></div>
    <div class="log" id="drag"></div>
    <div class="log" id="dragstart"></div>
    <div class="log" id="dragend"></div>
    <div class="log" id="dragover"></div>
    <div class="log" id="dragenter"></div>
    <div class="log" id="dragleave"></div>
    <div class="log" id="drop"></div>
</div>
<script type="text/javascript">
dvs=document.getElementsByClassName("drag");
var logs = {
    ALL: document.getElementById("ALL"),
    click: document.getElementById("click"),
    drag: document.getElementById("drag"),
    dragstart: document.getElementById("dragstart"),
    dragend: document.getElementById("dragend"),
    dragover: document.getElementById("dragover"),
    dragenter: document.getElementById("dragenter"),
    dragleave: document.getElementById("dragleave"),
    drop: document.getElementById("drop")
}
function log(lg,msg) {
    if(lg in logs) logs[lg].innerHTML = (msg + '<br>' + logs[lg].innerHTML).slice(0,1000);
    if(lg!="drag" && lg!="dragover") logs.ALL.innerHTML = (msg + '<br>' + logs.ALL.innerHTML).slice(0,1000);
}

for(var d,i=0;i<dvs.length;i++) (function(){var _i=i, d=dvs[i];
    d.onclick = function(ev) {log("click","click: "+_i)}
    d.ondrag = function(ev) {log("drag","drag: "+_i)}
    d.ondragstart = function(ev) {log("dragstart","dragstart: "+_i); ev.dataTransfer.setData('x-application/x-null','')}
    d.ondragend = function(ev) {log("dragend","dragend: "+_i)}
    d.ondragover = function(ev) {log("dragover","dragover: "+_i); ev.preventDefault()}
    d.ondragenter = function(ev) {log("dragenter","dragenter: "+_i)}
    d.ondragleave = function(ev) {log("dragleave","dragleave: "+_i)}
    d.ondrop = function(ev) {log("drop","drop: "+_i)}
})();
</script>
</body></html>

Firefox Triggers＆＃39; dragenter＆＃39;两次

0 个答案: