仅在单击按钮时启动函数？（javascript）

我如何为一个函数创建一个开始按钮？我有9个不同的功能在我的页面上为不同的动画。我需要弄清楚只有在点击按钮（开始按钮）时如何执行动画我之所以想这样做是因为我正在制作一个简单的游戏，但我希望最终用户能够在游戏开始之前与游戏的元素进行交互（我已经用jQuery完成了这项工作，但目前我只能在游戏运行时移动元素，这不是我想要做的。）动画功能的一个简单示例是

function animate0(pos) {
    pos %= urls.length;
    var animation0 = document.getElementById('animation0');
    var counter = document.getElementById('counter');
    animation0.src = urls[pos];
    if (pos == 1) {
        animation0.onclick = function() {
            counter.innerHTML = parseInt(counter.innerHTML) + 1;
        }
    }
    else {
        animation0.onclick = function() {
            //do nothing
        }
    }
    setTimeout(function() {
        animate0(++pos);
    }, (Math.random()*500) + 1000);
}

然后我用这个来执行动画

window.onload = function() { //Frames go below, seperated by commas format= , "URL");
    urls = new Array("http://i51.tinypic.com/sxheeo.gif", "http://i56.tinypic.com/2i3tyw.gif");
    animate0(0);

要在页面上显示动画

<img id='animation0' src ='http://i51.tinypic.com/sxheeo.gif'/>

谢谢

document.getElementById('start').onclick = function(){
    animate0(0);
}

这是假设您有一个

id='start'

---

这里有一个小问题：

我想我可能误解了你的问题，但如果你有这个按钮（或者实际上是关于任何其他元素）：

DOM0处理程序的问题是每个元素上只能有一个处理程序/事件类型

基于标准的浏览器上的DOM2样式如下所示：

document.getElementById("theButton").addEventListener('click', function(event) {
    event.preventDefault();
    animate0(0);
}, false);

document.getElementById("theButton").attachEvent('onclick', function() {
    animate0(0);
    return false;
});

…在旧版IE上，如下所示：

document.getElementById("theButton").addEventListener('click', function(event) {
    event.preventDefault();
    animate0(0);
}, false);

document.getElementById("theButton").attachEvent('onclick', function() {
    animate0(0);
    return false;
});

请注意区别，事件名称在DOM2标准中是“click”，在Microsoft中是“onclick”，而

事件

对象在DOM2标准的第一个参数中传递，但在Microsoft的旧浏览器上它是一个全局变量（我没有使用）。（与微软不谋而合，在IE5-IE6的时间框架内，他们做了很多创新web浏览器，包括ajax、

innerHTML

，事实上，通过

attachEvent

，每个元素的每个事件都有多个处理程序，这比DOM2标准早。就在IE6之后，他们才让球落下……嗯……十多年。）

---

在所有这些情况下，我都直接调用了

animate0

，因为它执行第一个循环，然后自己安排下一个位。当然，您可以使用

setTimeout

将第一个位安排为异步（可能只需使用

0

的延迟，在大多数浏览器上这将是5-10毫秒）。这取决于你想做什么。

这与这个问题有关……谢谢Neal，我感谢你的帮助，到目前为止，我已经经历了这方面的3种不同变化。：p结果证明你的动画代码是我尝试做的最好的。我不是说我（一定）推荐它，但肯定是“最简单的”是将

onclick=…

内联放在HTML中吗？@nnnnnn:Nah，然后您会运行所有这些全局函数，这可能会变得复杂，您必须记住包含单词“return”，以便防止默认操作。；-）（好吧，这有点开玩笑。我没有列出这一点，主要是因为这不是最佳实践，而且OP似乎很乐意悄悄地分配处理者。）啊哈，我只是在寻找一些有效的方法，当然我的整个项目可能会有更干净的方法，但因为我才刚刚开始，我只想学习语法之类的。我以后会担心做事情的最佳/最干净的方法。@T.J.Crowder-说到防止默认操作，当所讨论的控件只是一个

-实际上没有要防止的默认值。我记得我第一次阅读您的答案时，看到您包含了那些

返回false；

和

预防默认值（）

函数中的语句。我正在尝试确定始终这样做是否是一个好习惯，以确保在必要的情况下不会忘记这些语句。@nnnnnn：同意，对于没有默认操作的元素，不需要进行长时间的阻止。我不在自己的代码中这样做，但我在代码示例中这样做，人们可能会喜欢对默认操作撒谎，比如链接：-）我可能应该在做的时候标记出来。