Question

我有下一个代码：

document.onreadystatechange = function() {
  if (document.readyState == "interactive") {
    var dropZone = document.getElementById("dropZone");
    dropZone.addEventListener("dragover", handleDragOver);
    dropZone.addEventListener("drop", handleDrop);
    console.log(dropZone);
  }
};

问题是addEventListener没有向dropZone对象添加任何侦听器。因此，当我在控制台日志中检查dropZone对象时，＆＃34; ondragover＆＃34;和＆＃34; ondrop＆＃34;属性是空的。

我尝试使用readyState＆＃34;完成＆＃34;而不是＆＃34;互动＆＃34;但它也不起作用。当我尝试将这些监听器添加到body元素时，它的工作正常（添加了监听器并且所有处理函数都有效）。

我无法弄清问题是什么。所以请任何人给我建议我应该朝哪个方向发展。

Answer 1

这将尝试查找dropZone元素，如果尚未加载，请在DOM完全加载后再试一次。这应该适用于您的脚本（头部，正文开始，正文结束，外部文件，异步加载...）

function activateDropZone() {
    var dropZone = document.getElementById("dropZone");
    if (dropZone) {
        dropZone.addEventListener("dragover", handleDragOver, false);
        dropZone.addEventListener("drop", handleDrop, false);
    } else document.addEventListener("DOMContentLoaded", activateDropZone, false);
}

function handleDragOver(e) {
    e.preventDefault();
    document.getElementById("dropZone").style.backgroundColor = "purple";
}

function handleDrop(e) {
    e.preventDefault();
    document.getElementById("dropZone").style.backgroundColor = "violet";
    document.getElementById("draggable").style.visibility = "hidden";
}

activateDropZone();

DIV {float: left; width: 200px; height: 200px; background-color: blue; color: white;}
DIV:last-of-type {width: 100px; height: 100px; background-color: red;}

<DIV ID="dropZone">dropzone</DIV>
<DIV ID="draggable" draggable="true">draggable</DIV>

addEventListener不会向元素添加侦听器

1 个答案: