我的拖放功能不起作用。我收到一个类型错误。这是什么意思？

我收到一个错误，指出：

未捕获的类型错误：无法读取 null 的属性"addEventListener"，

我正在尝试制作一个带有披萨图像的拖放游戏，并且我正在努力将任何东西拖放到HTML上的任何地方。当我为它创建 HTML 时，我不知道为什么我的addEventListener为空。

这是我到目前为止的代码：

<html>
<body>
<div id="outerContainer">
    <div id="container">
        <div id="item">
        </div>
    </div>
</div>
</body>
</html
<script>
var dragItem = document.querySelector("#item");
var container = document.querySelector("#container");
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;

container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);

您应该尝试将javascript代码放在函数中，并在onload事件上调用该函数。这是为了确保在执行javascript时加载DOM。

<html>
<body onload="init()">
    <div id="outerContainer">
        <div id="container">
            <div id="item">
            </div>
        </div>
    </div>
</body>
</html>
<script>
function init() {
    var dragItem = document.querySelector("#item");
    var container = document.querySelector("#container");
    var active = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;
    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);
}
</script>

相关内容

最新更新

热门标签：