2013-06-08 1 views
7

HTML5 File Reader API를 다루는 자바 스크립트를 발견했습니다. 그것은 순수한 자바 스크립트로 작성되었습니다, 나는 그것을 jQuery 스크립트로 변환하는 과정에 있습니다. 그러나이 시점에서 붙어 있습니다.왜이 일반 JavaScript가 작동하며 이에 상응하는 jQuery가 실패합니까?

이 작동 :

document.getElementById('drop-area').addEventListener('drop', function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    console.log(e.dataTransfer.files); // outputs the right stuff 
}, false); 

이 실패

$('#drop-area').on('drop', function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    console.log(e.dataTransfer.files); // ERROR: e.dataTransfer is undefined 
}); 

이 문제에 대한 해결책은 무엇인가?

+0

동일한 코드를 사용하는 경우 더 빠르기 때문에 순수한 JS를 사용하지 않는 이유는 무엇입니까? – Markasoftware

+0

@ MarkSoftware 내 애플 리케이션의 나머지 부분은 jQuery를 사용하는 것이 아니라 일관된 코드 기반을 가지고있다. 또한이 스크립트의 일부는 물론 jQuery와 훨씬 더 깔끔하고 통증없는 사용자 지정 DOM 조작이 필요합니다. – TK123

+0

@ TK123 균일 한 코드베이스를 원한다면 일반 자바 스크립트 만 사용하면됩니다. 결국, + + 연산자조차 자바 스크립트이므로 jQuery를 사용하면 일관성이 없다. –

답변

11

jQuery는 dataTransfer 이벤트 속성을 정상화하지 않습니다.이 이벤트 속성에 액세스하려면 원래 이벤트를 거쳐야합니다. dataTransfer은 다음으로 jQuery를 이벤트 객체에 추가되도록

console.log(e.originalEvent.dataTransfer.files); 

또한 설정할 수 있습니다.

jQuery.event.props.push("dataTransfer");