javascript - 浏览器上 dragLeave 事件的奇怪行为

Question

我在使用“dragstart”、“dragleave”事件的浏览器上处理拖动事件。当仅添加宽度属性时，Internet Explorer 11 中的行为非常不同。一旦为元素指定了宽度属性，dragLeave 事件就会开始触发，如果没有它，它就不会触发。有人可以解释为什么仅仅因为 width 属性就会观察到两种不同的行为。此问题在 IE11 中特别明显。

这里有两个仅在 CSS 上不同的 jsFiddle:https://jsfiddle.net/fb5sp5yc/1 https://jsfiddle.net/f3ap2242/3 .在其他浏览器(Chrome、Firefox)中，一切都按预期触发。

HTML 主体:

<div id="d" draggable="true">MoveInMoveOut</div><br>
<div id="s" draggable="true">DragMe</div>
<select id=oResults size=30>
    <option>List of Events Fired
</select>

JS代码:

function ShowResults() { 
    var oNewOption = new Option(); 
    oNewOption.text = event.type + "  fired by  " + event.srcElement.id;
    oResults.add(oNewOption,0);
}

var myDiv = document.getElementById("d");
myDiv.addEventListener('dragenter', ShowResults, false);
myDiv.addEventListener('dragleave', ShowResults, false);

CSS:

#s {
    background-color: red;
    width: 200px; /*Only this property changes*/
}

#d {
    background-color: yellow;
    width: 200px; /*Only this property changes*/
}

Answer 1

在 Chrome 中，如果 s 和 d 的宽度大于元素的宽度，则默认会有一个 overflow 属性，但 IE 默认不会发生。我试着给

#oResults{
溢出:可见；
}

它对我来说很好，请尝试包含它并在 IE 中测试。