為什么表單的提交回調函數不能以 "submit" 作為函數名?


源代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
    function submit(s){
        alert(s)
        return false;
    }
    </script>
</head>
<body>
    <form action="" onsubmit="return submit(1);">
        <div class="row"><label>ID:<input type="text" /></label></div>
        <div class="row"><input type="submit" value="查詢" /></div>
    </form>
</body>
</html>

你可以直接把上面的代碼粘貼到html文件里運行。

操作如下:在ID里輸入任意字符串,然后單擊按鈕。

預期效果:彈出一個彈出框,頁面不刷新(你剛剛填的字符串還在那才對)。

實際效果:沒有彈出框,頁面刷新了。就好像不存在submit()這個方法一樣。

解決辦法:把submit()重命名為submit1()(或其他的什么名字),就能達到預期效果。

請問:What the fuck? 為什么會這樣?

——————————————————————————————————————————————————

這里給出賀師俊的解答:

受邀回答。 

你的代碼里綁定事件處理器的部分是這樣寫的: 
<form onsubmit="return submit(1);"> 
問題就在於這里。 

由於歷史原因,在onxxx的屬性中直接書寫的代碼,其context首先是該元素自身(效果上類似於 with (this) { ...你的代碼... } )。而form元素自身就有submit()方法。因此你的代碼實際調用的是form.submit(),而不是你之前聲明的submit函數。 

解決方法很簡單,改成: 
<form onsubmit="return window.submit(1);"> 
即可。 


或者不用onxxx屬性,而是直接用腳本綁定: 
<script> 
document.forms[0].onsubmit = function() { return submit(1) } 
</script>

————————————————————————————————————————————————————

感謝賀師俊


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM