Javascript:在函数外部初始化变量，在函数内部使用

Question

这是我的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>

但当我调用该函数时，什么也不会发生。我希望变量助手是双全局的，并且所有的东西都预先初始化，这样当函数被调用

Answer 1

您的move函数有权访问helper变量。我的猜测是，您显示的代码位于页面上helper元素上方的script元素中，因此当您的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（旧版IE上的attachEvent）。