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

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

下面是两个jsFildles，它们只在CSS中有所不同：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*/ 
}

来源

2016-11-20 kumardeepakr3

看起来像一个IE特定的错误。它在Edge中可以正常工作，所以我只需指定宽度即可使其工作。不幸的是，这些是IE最近的特点。即使微软已经放弃了新的浏览器。 –

在Chrome中，如果s和d的宽度比元件的宽度更然后会有一个默认的溢出属性，但是IE默认情况下不会发生。我试着给

#oResults{ overflow:visible; }

它的工作对我很好，请尝试包括这句和测试在IE中。

来源

2016-11-20 14:50:22 Ajaykumar

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

回答

相关问题