为什么表单的提交回调函数不能以 "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>

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

感谢贺师俊

posted @ 2011-12-29 17:54  FrankFang  阅读(4608)  评论(8编辑  收藏