js模拟点击以提交表单为例兼容主流浏览器
2013-11-29 00:00
477 查看
在实际的应用开发中,我们会常常用到JS的模事件,但有时会遇到一些问题,比如说点击事件,举个简单的例子,点击表单外的“提交”按钮来提交表单。上代码吧。
Html:
Javscript:
经过测试,IE,FF,Chrome,Opera,Safari都没有问题,均可正常提交表单。
但在实际的设计中,为了让提交按钮更好看,buildder经常把它们用a标签来处理,加个背景图片来模拟按钮,我们仍然用上面的思路来尝试,增加一个a标签,让它来提交表单,我们仅修改html。
Html:
Javascript:
运行后,问题出现了,IE、FF、Opera均OK,但Chrome和Safari不能正常运行,后来网上搜索了下,发现a标签并不是和按钮一样有onclick()事件的,解决办法是针对 IE 和 FF编写不同的逻辑,JS代码如下:
javascript:
至此,问题解决,虽然这个问题很简单,但很容易被大家忽略,贴出来和大家一起分享。
语法:
createEvent(eventType)
参数 描述
eventType 想获取的 Event 对象的事件模块名。关于有效的事件类型列表,请参阅”说明”部分。
返回值
返回新创建的 Event 对象,具有指定的类型。
抛出
如果实现支持需要的事件类型,该方法将抛出代码为 NOT_SUPPORTED_ERR 的 DOMException 异常。
说明
该方法将创建一种新的事件类型,该类型由参数 eventType 指定。注意,该参数的值不是要创建的事件接口的名称,而是定义那个接口的 DOM 模块的名称。
下表列出了 eventType 的合法值和每个值创建的事件接口:
参数 事件接口 初始化方法
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()
用该方法创建了 Event 对象以后,必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息,请参阅 Event 对象参考。
该方法实际上不是由 Document 接口定义的,而是由 DocumentEvent 接口定义的。如果一个实现支持 Event 模块,那么 Document 对象就会实现 DocumentEvent 接口并支持该方法。
Html:
<h3>请单击“提交”,测试提交按钮的单击事件也被触发了。</h3> <button id="btn">提交</button> <form action="#" method="get" id="form"> <input type="text" name="site" value="www.woiweb.net" readonly/> <input id="subbtn" type="submit" value="先别点击此按钮提交" onclick="alert('我已经提交了');"/> </form>
Javscript:
<script type="text/javascript"> var sub = document.getElementById("subbtn"); var btn = document.getElementById("btn"); //通用方法 btn.onclick = function() { sub.click(); } </script>
经过测试,IE,FF,Chrome,Opera,Safari都没有问题,均可正常提交表单。
但在实际的设计中,为了让提交按钮更好看,buildder经常把它们用a标签来处理,加个背景图片来模拟按钮,我们仍然用上面的思路来尝试,增加一个a标签,让它来提交表单,我们仅修改html。
Html:
<h3>请单击“提交”,测试提交按钮的单击事件也被触发了。</h3> <button id="btn">提交</button> <form action="#" method="get" id="form"> <input type="text" name="site" value="www.woiweb.net" readonly/> <!--<input id="subbtn" type="submit" value="先别点击此按钮提交" onclick="alert('我已经提交了');"/> --> <a id="subbtn" href="javascript:;" onclick="alert('在此调用提交表单的方法')">模拟提交按钮</a> </form>
Javascript:
<script type="text/javascript"> var sub = document.getElementById("subbtn"); var btn = document.getElementById("btn"); //通用方法 btn.onclick = function() { sub.click(); } </script>
运行后,问题出现了,IE、FF、Opera均OK,但Chrome和Safari不能正常运行,后来网上搜索了下,发现a标签并不是和按钮一样有onclick()事件的,解决办法是针对 IE 和 FF编写不同的逻辑,JS代码如下:
javascript:
<script type="text/javascript"> var sub = document.getElementById("subbtn"); var btn = document.getElementById("btn"); //通用方法 btn.onclick = function() { //sub.click(); if (/msie/i.test(navigator.userAgent)) //IE { sub.fireEvent("onclick"); } else { var e = document.createEvent('MouseEvent'); e.initEvent('click', false, false); sub.dispatchEvent(e); } } </script>
至此,问题解决,虽然这个问题很简单,但很容易被大家忽略,贴出来和大家一起分享。
语法:
createEvent(eventType)
参数 描述
eventType 想获取的 Event 对象的事件模块名。关于有效的事件类型列表,请参阅”说明”部分。
返回值
返回新创建的 Event 对象,具有指定的类型。
抛出
如果实现支持需要的事件类型,该方法将抛出代码为 NOT_SUPPORTED_ERR 的 DOMException 异常。
说明
该方法将创建一种新的事件类型,该类型由参数 eventType 指定。注意,该参数的值不是要创建的事件接口的名称,而是定义那个接口的 DOM 模块的名称。
下表列出了 eventType 的合法值和每个值创建的事件接口:
参数 事件接口 初始化方法
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()
用该方法创建了 Event 对象以后,必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息,请参阅 Event 对象参考。
该方法实际上不是由 Document 接口定义的,而是由 DocumentEvent 接口定义的。如果一个实现支持 Event 模块,那么 Document 对象就会实现 DocumentEvent 接口并支持该方法。
相关文章推荐
- js模拟点击以提交表单为例兼容主流浏览器
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
- JS模拟form表单提交,浏览器终止提交
- js获取点击事件的位置,兼容主流浏览器
- js实现Enter键提交表单(兼容各个浏览器)
- JS防止表单提交之后用户点击浏览器后退按钮再次提交
- js 异步表单提交,图片上传,兼容异步模拟ajax技术
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- js监听用户的键盘敲击事件,兼容各大主流浏览器
- 表单提交到下一个页面后,再点击IE上的后退,如何能让表单内容再次显示出来?(以及当前页禁止IE返回按钮js)
- 关于js中按钮类型是image时表单验证问题---点击一次可以验证再次点击直接提交--的问题
- JS、jqueryie6浏览器下使用js无法提交表单的解决办法
- js 模拟提交form表单
- javascript之自定义js封装库兼容主流浏览器实现DOM加载之后,页面完全加载之前执行js
- js 打印DIV内容 print div 兼容IE FF Google等主流浏览器
- JS实现文本复制功能,兼容主流浏览器
- html\css\js-dom在不同主流浏览器的兼容问题
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- 【转】图片上传简单JS预览,兼容IE火狐等主流浏览器
- 一个小型浏览器架构:HTTP通讯、COOKIE处理、HTML解析、JS模拟、表单处理