jQuery 1.6.2 바인드 이벤트가 더 이상 작동하지 않습니까?

Question

.bind()을 'dragenter', 'dragover' 및 'drop'과 함께 사용하려고하므로 바탕 화면에서 브라우저로 파일을 드래그 할 수 있습니다.

첨부 된 jsfiddle를 참조하십시오. http://jsfiddle.net/v82An/23/

$(function(){ 
    function dragenter(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
    } 
    function dragover(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
    }  
    function drop(e) { 
     e.stopPropagation(); 
     e.preventDefault();   
     alert('hi') 
    } 

    $('#drop').bind('dragenter', dragenter, false); 
    $('#drop').bind('dragover', dragover, false); 
    $('#drop').bind('drop', drop, false);  
}); 

이 바이올린은 제대로 1.5에서 이러한 이벤트를 첨부하지만 1.6에서 그들은 단순히 작동하지 않습니다.

내가 잘못했는지 아는 사람이 있습니까?

당신이 preventBubble false으로 설정하지 않는 경우 작동하는 것 같다

Answer 1

:

$('#drop').bind('dragenter', dragenter); 
$('#drop').bind('dragover', dragover); 
$('#drop').bind('drop', drop); 

이

DEMO

업데이트 : 당신은 세 개의 매개 변수를 전달 documentation 보면 마지막 하나는 어디 부울은 다음과 같이 해석됩니다.

.bind(eventType, [eventData], preventBubble) 

즉, t hat 핸들러는 이벤트 핸들러로 사용되지 않고 이벤트 데이터로 사용됩니다.

그들은 핸들러를 감지하는 방법을 변경했습니다. jQuery 1.5.2, 그것은이었다

if (jQuery.isFunction(data) || data === false) { 
    fn = data; 
    data = undefined; 
} 

볼, 두 번째 인수는이 하나 (대신 세번째의) 이벤트 핸들러로서 사용 된 함수 때.

그러나가 jQuery 1.6.2 변경되었습니다 :

if (arguments.length === 2 || data === false) { 
    fn = data; 
    data = undefined; 
} 

는 이제 많은 인수가 전달되는 방법을 테스트 전용입니다. 귀하의 경우, data은 false이 아니며 함수이며 3 개의 인수를 전달하므로 fn은 변경되지 않습니다. 그것은 false으로 유지됩니다.

핸들러가 false입니다

, then this happens :

if (handler === false) { 
    handler = returnFalse; 
} else if (!handler) { 
    // Fixes bug #7229. Fix recommended by jdalton 
    return; 
} 

그래서이 사실은 이제 고정이 특정 이벤트에 문제가 아닙니다 jQuery를 1.5 버그로 볼 수있다.

Answer 2

내 문제는 바인딩 프로세스 중에 원래 이벤트 객체를 glorifying jQuery와 거짓말을 발견했습니다.

내 코드는 다음과 같이 보았다 :

는

$dropArea = $(".dropArea"); 
$dropArea.bind({ 
    dragover: function (ev) { 
     $(this).addClass('hover'); 
     ev.preventDefault(); 
     return false; 
    }, 
    dragend: function() { 
     $(this).removeClass('hover'); 
     return false; 
    }, 
    dragleave: function() { 
     $(this).removeClass('hover'); 
     return false; 
    }, 
    drop: function (ev) { 
     ev.preventDefault(); 
     //e = e || window.event; 
     var data = ev.dataTransfer.getData("text/html"); 
     ev.target.appendChild(document.getElementById(data)); 

     console.log("dropping element."); 
     return false; 
    }); 

jQuery를 이전 이벤트가 이벤트 객체의 새로운 더 영광의 jQuery 버전으로 최대 객체를 포장했다.

나는이 줄을 추가 :

ev = ev.originalEvent; 

원래 이벤트가 다시 객체를 얻기 위해, 나는에서 preventDefault()를 호출 할 수있는시를, 모두는 다시 한 번 잘했다.

시간이 절약되기를 바랍니다. (원래 jQuery 객체와 관련하여 함수를 둘러싼 채로 원래의 자바 스크립트 객체와 관련되어 있기 때문에 계속 머리를 감싼다.)