5

我正在尝试在 Firefox 中进行文件拖放，并正在采取婴儿步骤开始。现在，我只是想将一些文件拖到一个放置区并获取已放置文件的列表。在这一点上，我还不想对文件做任何事情。

当我将文件（在本例中为图像，但无论文件类型如何，都会发生相同的事情）从 finder 拖动到 dropzone 时，我可以看到 dragenter 和 dragexit 事件正在触发。当我将文件放入放置区时，放置事件不会触发。相反，浏览器会自行打开图像（例如，地址显示为 file://path/to/my/image.png）。

我的 javascript 看起来像这样：

  dropbox = document.getElementById("standard_file_dropzone");

  dropbox.addEventListener("dragenter", function(){console.log('standard enter');}, false);
  dropbox.addEventListener("dragexit", function(){console.log('standard exit');}, false);
  dropbox.addEventListener("dragover", $.noop, false);
  dropbox.addEventListener("drop", function ( event ) {
                                     console.log('standard dropped');
                                     event.stopPropagation();
                                     event.preventDefault();

                                     if(( typeof event.dataTransfer.files !== 'undefined' ) &&
                                        ( event.dataTransfer.files.length > 0 )) {
                                       console.dir( event.dataTransfer.files );

                                     }
                                     return false;
                                   }, false);

我的 HTML 如下所示：

    <div id="standard_file_dropzone" style="height:150px; width:150px; border:solid;">
      Standard Drop Files Here
    </div>

所以我想知道我在这里做错了什么？上面的代码似乎没有任何问题（至少对我来说很明显）。dragenter/exit 事件正在触发，为什么不是 drop 事件？为什么浏览器试图打开文件本身？

需要注意的一点是，当我在 Chrome 中打开我的页面时，它按预期工作，所以这是一个 Firefox 特定的问题。

谢谢，克里斯托夫

4

1 回答 1

5

问题是使用 $.noop 作为拖动处理程序。用一个实际上停止传播和冒泡的函数替换它，它开始按预期工作。

我有时就是个白痴。:p

于 2012-06-11T17:30:03.537 回答