源代碼如下:
<!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>
————————————————————————————————————————————————————
感謝賀師俊。