`
花花人
  • 浏览: 67871 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

触发事件name与javascript函数名同名

阅读更多

转载:触发事件name与javascript函数名同名,form提交问题

<script></script>标签:

it

分类: JavaScript&CSS&Ajax

<!-- 正文开始 -->

今天遇到一个比较诡异的问题,曾浪费了我好一会时间,现在终于搞定,回头看起来真是屁松的一件事:

  1. <form id="myForm">  
  2.      <input  type="submit" name="submit" value="commit">  
  3.      <input type="button"  name="saveInfo" onclick="save()">  
  4. </form>  

调用的js脚本为:

  1. function save(){   
  2.     if (!checkInput()) return;   
  3.     document.myForm.target='_top';   
  4.     document.myForm.action='newUri.do';   
  5.     document.myForm.submit();   
  6. }   
  7.   
  8. function checkInput(){   
  9.    return true;   
  10. }  
程序在执行到document.myForm.submit()的时候总是报对象不支持此属性…………,
baidu一下后发现,原来是<input type="submit" name="submit">所致,修改name="submit"为其他名字后问题解决…………
 
 
  类似的问题还有:
  1.      <input  type="button" name="exit" value="退出" onclick="exit()">  

 

   这种情况下click事件也不能触发,页面上也会报同样的错误(对象不支持此属性),解决方法同上,修改name="exit"onclick="exit()"为其他名字

http://blog.sina.com.cn/s/blog_53345e4c0100ba3d.html

 

 

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

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

分享到:
评论

相关推荐

    模拟用户操作Input元素,不会触发相应事件

    总结来说,JavaScript中的模拟用户操作与实际用户交互不同,不会触发输入元素的事件。要触发事件,需要使用`dispatchEvent()`方法。同时,理解同名`input`元素的数据提交格式对处理表单数据至关重要。在编写涉及用户...

    事件高级用法及兼容写法

    定义事件时,事件函数并不会立即执行,只有当触发相应事件时才会执行。 2. **事件对象** 当浏览器执行事件时,会将所有与该事件相关的信息(如鼠标位置、触发事件的目标等)封装成一个对象,并将此对象传递给...

    js函数名与form表单元素同名冲突的问题

    在进行DOM操作时,很容易遇到函数名与页面中的表单元素id同名的情况,尤其是当使用原生JavaScript而非框架时。这种情况容易导致命名冲突,进而影响代码的执行。本文将详细介绍该问题及其解决方案。 ### 问题描述 ...

    JavaScript JavaScript JavaScript

    - `event.srcElement.tagName`:返回触发事件的元素的标签名。 - `event.srcElement.type`:如果触发事件的是一个表单控件,则返回该控件的类型(例如"text"、"submit"等)。 - 捕获与释放捕获: - `event....

    JavaScript常见事件处理程序实例总结

    在探讨JavaScript事件处理程序的实现和使用时,我们首先需要了解什么是事件以及事件处理程序。在Web开发中,事件是指用户或浏览器自身执行的某些动作,比如点击、键盘按键、鼠标移动等。为了响应这些动作,开发者会...

    网页javascript精华代码集

    从给定的文件内容来看,主要涉及的是JavaScript中与窗口操作相关的代码片段,具体包括了如何使用`window.open()`函数来打开新窗口、设置新窗口的属性以及如何关闭窗口等。下面将对这些知识点进行详细解析。 ### ...

    JavaScript验证汇总大全

    当触发事件时,所有同名复选框的状态将与当前对象的状态保持一致。 ### 8. 检查邮政编码格式 ```javascript function check_youbian(obj) { var reg = /^\d{6}$/; if (obj.value != "" && !reg.test(obj.value))...

    js this函数调用无需再次抓获id,name或标签名

    标题和描述提到的"js this函数调用无需再次抓获id,name或标签名",意味着通过正确使用`this`,我们可以避免频繁地使用`document.getElementById`、`document.getElementsByName` 或 `document.getElementsByTagName...

    javascript技术大全

    - **`event.srcElement.tagName`**:返回触发事件元素的标签名称。 - **`event.srcElement.type`**:返回触发事件元素的类型(如 input 元素的 type)。 **2. 捕获与释放** - **`event.srcElement.setCapture()`**...

    jquery 绑定回车动作扑捉回车键触发的事件

    在jQuery中,捕获回车键触发的事件是常见的需求,尤其在表单提交或文本输入等场景。这里我们详细探讨如何实现这个功能。 首先,jQuery的`keydown`事件是用于监听用户按下键盘按键的动作。当用户按下回车键(键盘上...

    浏览器兼容页面开发注意事项(javascript篇)_101028分享.pdf

    12. **body对象**:访问`body`对象时,IE可能在文档未完全加载时就可访问,而其他浏览器可能需要等待`DOMContentLoaded`事件触发。 13. **url encoding**:处理URL编码时,IE和其他浏览器可能使用不同的函数。例如...

    Java Script(js)中的 DOM 和事件(csdn)————程序.pdf

    2. Name选择器:`getElementsByName`返回所有同名的元素(返回一个NodeList集合)。 3. 标签选择器:`getElementsByTagName`返回指定标签的所有元素。 4. 类名选择器:`getElementsByClassName`在现代浏览器中可用,...

    Javascirpt定义类详细介绍

    - **访问修饰符**:JavaScript类支持`public`(默认)、`private`和`protected`访问修饰符,但它们的作用与传统面向对象语言稍有不同。在JavaScript中,`private`和`protected`主要影响类的静态属性和方法,以及类...

    【JavaScript源代码】VUE watch监听器的基本使用方法详解.docx

    当我们需要监听某个数据属性,例如`firstName`时,可以在`watch`对象中定义一个与之同名的函数。这个函数接收两个参数,`newVal`和`oldVal`,分别代表数据变化后的值和变化前的值。例如: ```javascript var vm...

    JAVASCRIPT THIS详解 面向对象

    例如,在将事件处理函数与事件绑定时,`this`可能指向不同的对象。如果在全局作用域中调用事件处理函数(如直接调用,而不是通过事件触发),`this`将指向全局对象(在浏览器中是`window`),这可能导致意外的行为。...

    IE和Firefox中J avaScript兼容

    本文将详细介绍在IE与Firefox浏览器之间实现JavaScript脚本兼容的方法,主要涉及函数、属性、方法等方面的内容。 #### 1. 获取表单元素 - **IE**: 支持`document.formName.item("itemName")`和`document.formName....

    ASP Javascript 文件上传

    在JavaScript中,可以监听`change`事件来获取用户选择的文件信息。 2. **HTML部分**: 创建一个文件输入控件和一个提交按钮,如下所示: ```html &lt;input type="file" name="uploadFile" id="uploadFile"&gt; ...

    JavaScript获取和设置CheckBox状态的简单方法

    在JavaScript中,CheckBox(复选框)是一种常用的表单元素,用于用户进行是/否或者多选选项的选择。...在实际项目中,还可以结合事件监听(如`change`事件)来实现更复杂的逻辑,如实时更新数据或触发其他功能。

    JS常用代码大全(全)

    `event.srcElement.tagName`和`event.srcElement.type`分别返回该元素的标签名和类型,这对于事件处理程序来说非常有用,可以判断事件是发生在哪种类型的元素上。 **事件按键:** `event.keyCode`返回按下的键的...

Global site tag (gtag.js) - Google Analytics