javascript - onclick 功能有效，但 onsubmit 无效

Question

我正在尝试制作一个提交按钮，当它被点击时，图像将移动，另一个按钮，当它被点击时，图像将重置。

不知何故，如果我用onclick函数来做，图像会移动，一切都很好，但如果我用函数来做，onsubmit那么它就行不通了。任何人都可以给我一个想法为什么？

这就是我的脚本：

function catMoveRight()
{
    document.getElementById("cat").style.left=parseInt(document.getElementById("cat").style.left)+1+"px";
}

window.onload=function()
{
    catTimer = null;

    document.getElementById("start").onsubmit=function()
    {
        if(catTimer == null)
        {   
            catTimer = setInterval("catMoveRight()",1000);
        }

    }

}

这是我的 HTML body：

<img src="cat.jpg" id="cat" style=" position: absolute; left: 10px;"/><br/>
<form action=" " method="post" id="start">
    <input type="submit" value="Start" style="position: absolute; left: 10px; top: 220px;" />
</form>

Answer 1

确保取消表单提交的默认操作。一种方法是false从事件处理程序返回：

document.getElementById("start").onsubmit = function()
{
    if(catTimer == null)
    {   
        catTimer = setInterval(catMoveRight, 1000);
    }
    return false;
};

也没有必要将字符串传递给setInterval. 不要在不需要eval的地方使用。

示例：http: //jsfiddle.net/QD3ev/1/