브라우저에서 dragLeave 이벤트의 이상한 동작

나는 'dragstart', 'dragleave'이벤트를 사용하여 브라우저에서 이벤트를 드래그하고있었습니다. Internet Explorer 11에서는 폭 속성을 추가 할 때 동작이 매우 다릅니다. 요소에 너비 속성이 지정 되 자마자 dragLeave 이벤트가 시작되고 그 이벤트가 없으면 이벤트가 시작되지 않습니다. 폭 속성 때문에 정확히 두 가지 동작이 관찰되는 이유를 설명 할 수 있습니까? 이 문제는 IE11에서 명시 적으로 관찰됩니다.브라우저에서 dragLeave 이벤트의 이상한 동작

다음은 CSS에만 다른 두 개의 jsFiddles입니다 (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 관련 버그처럼 보입니다. 그것은 가장자리에서 잘 작동하므로 그냥 작동 시키려면 너비를 지정합니다. 불행히도 요즘 IE의 특성입니다. 마이크로 소프트조차 새로운 브라우저를 위해 그것을 포기했다. –

, S와 D의 폭이 요소의 폭보다 더 많은 경우는 다음을 기본 오버플로 속성이 있지만 IE에서는 기본적으로 발생하지 않습니다. 나는 IE에서이 테스트를 포함하여 시도하십시오 그것은 나를 위해 잘 작동

#oResults{ overflow:visible; }

을 제공했습니다.

출처

2016-11-20 14:50:22 Ajaykumar

브라우저에서 dragLeave 이벤트의 이상한 동작

답변

관련 문제