我正在学习如何向 a 添加一个EventListener，<div>以便我可以将文件放入其中以读取 csv 文件。下面是我的简单 HTML 代码，它添加了一个EventListener，但是当我拖放文件时，Chrome 浏览器会不断下载我放下的文件，并且不会打印控制台输出“嘿”。如果有人能让我知道出了什么问题，我将不胜感激。:)
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
#drop{
border:2px dashed #bbb;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding:25px;
text-align:center;
width:128px;
font:20pt bold,"Vollkorn";color:#bbb
}
</style>
</head>
<body>
<div id="drop">Drop a file here</div>
<script type="text/javascript">
var drop_dom_element = document.getElementById('drop');
var workbook;
/* set up drag-and-drop event */
function handleDrop(e) {
console.log('hello');
e.stopPropagation();
e.preventDefault();
console.log('hey');
}
drop_dom_element.addEventListener('drop', handleDrop, false);
console.log('Done');
</script>
</body>
</html>
大多数（所有？）元素的默认行为是不允许删除。阅读这篇 MDN 文章。
dragenter 和 dragover 事件的侦听器用于指示有效的放置目标，即可以放置拖动项目的位置。网页或应用程序的大部分区域都不是放置数据的有效位置。因此，这些事件的默认处理是不允许丢弃。
在当前版本的 Firefox 和 Chrome 中，添加event.preventDefault()到dragover事件似乎可以解决问题。
element.addEventListener("dragover", function( event ) {
// prevent default to allow drop
event.preventDefault();
}, false);
当用户松开鼠标时，拖放操作结束。如果鼠标在作为有效放置目标的元素上释放，即取消最后一个 dragenter 或 dragover 事件的元素，则放置将成功，并且将在目标上触发放置事件。否则，拖动操作被取消，并且不触发任何放置事件。
添加对事件函数的preventDefault调用drop也是为了防止浏览器可能具有的默认行为，例如立即打开链接和图像。
你可以在这个 jsfiddle 中看到拖动文本或图像会触发drop事件，但 Firefox 和 Chrome 也会打开图像和链接。
| 归档时间： |
|
| 查看次数： |
2282 次 |
| 最近记录： |