[Javascript] 파이어폭스에서 드래그앤드롭(Drag-and-drop)의 ondrop이 제대로 호출 안될 때

: HTML5의 <canvas> 위로 이미지를 드래그앤 드랍을 할 때에는 보통

canvas.addEventListener("drop", function (e) {

    alert("dropped!");

    e.preventDefault();

});

: 이렇게 drop이벤트를 listen하게 되는데 drop 이벤트만 이렇게 처리하게 된다면 크롬, 사파리 등에서는 잘 동작하지만 파이어폭스에서는 왠지 이 drop 이벤트를 먹어버리고 브라우져 자체가 이미지를 열어버리게 된다.

: 이럴 때에는 dragover의 기본 동작도 방지시켜주면 파이어폭스에서도 drop 이벤트가 정상적으로 동작하게 된다.

canvas.addEventListener("dragover", function (e) {

    e.preventDefault();

    return false;

}

: 해당 캔버스 위에 이제 드랍을 하게 되면 이벤트 호출이 제대로 된다.

끝.