javascript - 丢弃事件不阻止默认

Question

我有以下内容：http: //jsfiddle.net/KywJT/

function dragEnter(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $(evt.target).addClass('over');
}

function dragLeave(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $(evt.target).removeClass('over');
}

function drop(evt) {
   evt.stopPropagation();
   evt.preventDefault();
   $(evt.target).removeClass('over');
}

jQuery( function ( $ ) {

  var $box = $( "#box" );
  $box.bind("dragenter", dragEnter);
  $box.bind("dragleave", dragLeave);
  $box.bind("drop", drop);
});

我正在使用 Chrome 版本 24.0.1312.52 m 和最后一个 jQuery (1.8.3)。当我将文件放入框中时，浏览器不会阻止默认行为。你能帮我么？

PS dragexit 已弃用正确吗？

Answer 1

如果您希望在 Google Chrome 中触发 drop 事件，则必须先定义一个 dragover 侦听器，即使该函数根本不做任何事情。我不知道为什么，这很奇怪......但清楚地识别并且易于复制:)昨天在那个sh * t上失去了2个小时：/希望这会有所帮助

Answer 2

这应该可以为您解决问题。

jQuery( function ( $ ) {
    var $box = $( "#box" );
    $box.bind("dragenter", dragEnter);
    $box.bind("dragleave", dragLeave);
    $box.bind("drop", drop);

    $(document).bind('dragover', function (e) {
         e.preventDefault();
    });
});

Answer 3

这是一个老问题，但我使用了这个问题的答案并编写了我想要的代码：

HTML：

<div id="image_holder" ondragover="dragEnter(this,event)"></div>

jQuery：

function dragEnter(a,evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $(evt.target).addClass('over');

    $(a).bind("dragleave", dragLeave);
    $(a).bind("drop", drop);

    $(document).bind('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });
    return false;
}

function dragLeave(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $(evt.target).removeClass('over');
    return false;
}

function drop(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $(evt.target).removeClass('over');
}

这具有您可以轻松地将其用于页面中的不同元素的特权。