0

当我单击 div 框时，我似乎无法触发代码，它只是继续运行 onload。

<div id='tank' onclick="timer"  style="position:relative; left:100px; top:240px;border-       radius:360px;
 background-color:green; height:100px; width:100px;"></div>
 <script type="text/javascript">

(function () {
// don't leak variables into the global scope - think "variable = carbon dioxide"
    var elem = document.getElementById('tank'), pos = 100,
       timer = setInterval(function() {
        pos++;
        elem.style.left = pos+"px";
        if( pos == 290) clearInterval(timer);

      },12);
  })();

4

2 回答 2

2 
(function () {
   //...
}());

立即运行函数内的代码，因此难怪您的代码在页面加载时运行。

onclick="timer"

根本什么都不做。这与编写如下内容相同：

var foo = 42;
foo; // <- this does not do anything

更糟糕的是，如果timer未定义，这将引发错误（在您的示例中就是这种情况）。

您需要做的是为元素分配一个作为点击事件处理程序的函数。例如：

document.getElementById('tank').onclick = function() {
    var elem = this, 
        pos = 100,
        timer = setInterval(function() {
            pos++;
            elem.style.left = pos+"px";
            if( pos == 290) clearInterval(timer);

        },12);
};

（并onclick="timer"从您的 HTML 中删除）

我建议阅读quirksmode.org 上的优秀文章，以了解有关事件处理的更多信息。

于 2012-09-03T15:52:15.460 回答
0 
<div id='tank' onclick="timer()"  style="position:relative; left:100px; top:240px;border-radius:360px; background-color:green; height:100px; width:100px;">
</div>
<script type="text/javascript">

function timer (){
    alert("h");
    var elem = document.getElementById('tank'), pos = 100,
    timer = setInterval(function() {
        pos++;
        elem.style.left = pos+"px";
        if( pos == 290) clearInterval(timer);

      },12);
}
</script>

对您的代码稍作修改。

于 2012-09-03T15:51:23.217 回答