删除文件时无法检测 chrome 扩展中的删除事件答案

【问题标题】：Unable to detect the drop event in chrome extension when dropped a file删除文件时无法检测 chrome 扩展中的删除事件
【发布时间】：2015-02-06 08:10:25
【问题描述】：

我正在构建一个 chrome 扩展，它允许用户拖放文件并将其保存到服务器。从扩展中，我在页面中注入了div 元素，当我放置图像文件时，浏览器会在整个页面上显示图像。扩展中未检测到drop 事件，但如果我有一个类型为文件的输入元素，并且如果我将文件放在该元素上，则检测到change 事件。

不确定如何从扩展中检测drop 事件。任何帮助表示赞赏。

contentScript.js 文件

//building the Dropzone Div
var dropdiv = $("<div>", {
  id    :"sforce-dz-dropZone",
  class : "sforce-dz-dropZonebg"
}).text('Add you\'re files here');

//injecting the drop div in the page
$("input[name=attachFile]").after(dropdiv);

//adding 'drop' event listener to the div.
//This is not getting logged at all.
$("#sforce-dz-dropZone").on('drop', function(e){
  e.preventDefault();
  e.stopPropagation();

  var files = e.target.files || e.dataTransfer.files;
  // process all File objects
  for (var i = 0, f; f = files[i]; i++) {
    console.log('the file name is '+ f.name);
  }

});

//Adding another event. click, just to see if the events are getting triggered.
//When clicked on the div the console is logging the below string.
$("#sforce-dz-dropZone").on('click',function(){
  console.log('clicked');
});

清单文件

{
  "name": "name",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "text",
  "author": "someone",
  "content_scripts": [
    {
      "matches" : ["https://*.mysite.com/*"],
       "js"     : ["jquery.js","contentScript.js"],
       "css"    : ["sforce-dz.css"]
    }
  ],
  "permissions": [
     "cookies",
     "unlimitedStorage"
  ]
}

【问题讨论】：

此代码在您的扩展程序中的什么位置，并向我们展示清单和/或您如何注入此代码。
我编辑了我的评论。 div 被注入就好了。我无法做的就是无法在 javascript contentScript 中检测到 drop 事件

标签： javascript jquery google-chrome-extension drag-and-drop

【解决方案1】：

这是处理拖放的一个非常令人困惑的部分。你会期望像处理click submit mouseOver 等一样只监听drop 事件。但除非它也有dragOver 事件，否则它不会起作用。

"如果没有dragOver 事件处理程序，将使用dragOver 事件的默认事件处理程序，因此不会触发drop 事件。" Answer Here

最简单的工作示例

/* events fired on the drop targets */
document.addEventListener("dragover", function( event ) {
  // prevent default to allow drop
  event.preventDefault();
});

document.addEventListener("drop", function( event ) {
  // prevent default action (open as link for some elements)
  event.preventDefault();
  console.log('dropped');
});

来自 HTML5Rocks 的工作示例

function handleFileSelect(evt) {
  evt.stopPropagation();
  evt.preventDefault();

  var files = evt.dataTransfer.files; // FileList object.

  // files is a FileList of File objects. List some properties.
  var output = [];
  for (var i = 0, f; f = files[i]; i++) {
    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                f.size, ' bytes, last modified: ',
                f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                '</li>');
  }
  document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

function handleDragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}

// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

【讨论】：

【解决方案2】：

dropdiv.on('dragover', function (e) {
    return false;
});

当鼠标在我们的拖放区域上方时，您必须返回“false”。
这样就实现了来源的过滤。

我建议您阅读 David Flanagan 写的书：“JavaScript：权威指南”

【讨论】：