1

我正在尝试.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 中它们根本不起作用。

有谁知道我是不是做错了？

4

2 回答 2

6

如果你不设置它似乎preventBubble工作false：

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

演示

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

.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时，就会发生这种情况：

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

所以这实际上可以被视为 jQuery 1.5 中的错误，现在已修复，并且这些特定事件不是问题。

于 2011-08-23T22:50:51.917 回答
0

我发现我的问题在于 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 对象相关联）。

于 2014-09-12T20:06:49.900 回答