0

这是我的 JavaScript 代码

var helper = document.getElementById("helper");

helper.style.position = "relative";
helper.style.width = "50px";
helper.style.height = "50px";
helper.style.border = "1px solid #000";

function move() {
    helper.style.left = event.offsetX + "px";
    helper.style.top = event.offsetY + "px";
}

和我的html代码

<div id="grid" onmousemove="move()" onmousedown="down()">
    <div id="helper"></div>
</div>

但是当我调用该函数时，什么也没有发生。我希望该变量助手具有全局性并且所有内容都已预先初始化，因此在调用函数时我不必重新初始化所有内容

4

1 回答 1

4

您的move函数确实可以访问该helper变量。我的猜测是您显示的代码位于页面script元素上方的helper元素中，因此当您的var helper = document.getElementById("helper");行运行时，该元素尚不存在。

另请注意，您的move处理程序依赖于特定于 IE 的行为（全局event对象）。尽管其他一些浏览器也提供了此行为以实现兼容性，但并非所有人都提供。为了使其更广泛地兼容，接受event作为参数：

function move(event) {
    // ...
}

...并像这样更新您的 DOM0 处理程序：

<div id="grid" onmousemove="move(event)" onmousedown="down(event)">

这是有效的，因为调用处理程序中的代码的范围onXYZ总是有一个event符号，即使没有全局符号。

或者，当然，使用addEventListener(attachEvent在较旧的 IE 版本上)。

于 2013-02-17T12:28:40.253 回答