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>

但是当我称这个功能没有任何反应时。我希望变量helper为bi全局，并且所有内容都已预先初始化，因此在调用函数时我不必再次初始化所有内容

Answer 1

您的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符号，即使没有全局符号。

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

Javascript：初始化函数外部的变量并使用内部函数

1 个答案: