浏览器上 dragLeave 事件的奇怪行为答案

【问题标题】：Strange behavior of dragLeave event on browsers浏览器上 dragLeave 事件的奇怪行为
【发布时间】：2016-11-20 13:45:27
【问题描述】：

我正在使用“dragstart”、“dragleave”事件在浏览器上处理拖动事件。当只添加一个宽度属性时，Internet Explorer 11 中的行为非常不同。一旦为元素指定了宽度属性，dragLeave 事件就会开始触发，如果没有它，它不会触发。有人可以解释为什么仅仅因为宽度属性而观察到两种不同的行为。在 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*/
}

【问题讨论】：

似乎是一个特定于 IE 的错误。它在 Edge 中工作正常，所以我只需指定一个宽度即可使其工作。不幸的是，这就是当今 IE 的本质。甚至微软也放弃了它，转而使用新的浏览器。

标签： javascript css internet-explorer-11 draggable

【解决方案1】：

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

#oResults{ overflow:visible; }

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

【讨论】：