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中它们根本不起作用。

任何人都知道我做错了吗？

Answer 1

如果您未将preventBubble设置为false：

，这似乎有效

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

DEMO

更新：如果您查看documentation，则传递三个参数，其中最后一个是布尔值，将被解释为：

.bind( eventType, [eventData], preventBubble )

表示处理程序不用作事件处理程序，而是用作事件数据。

他们改变了他们检测处理程序的方式。在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（它是一个函数），并且您传递了三个参数，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

我发现我的问题在于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对象和与它们相关的函数，因为它们与原始的javascript对象有关）。

jQuery 1.6.2绑定不再与拖动事件一起运行？

2 个答案: