onclick函數工作，但onsmit不

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/