js模拟点击事件实现代码


Posted in Javascript onNovember 06, 2012

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 接口并支持该方法。

Javascript 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
JS学习之一个简易的日历控件
Mar 24 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
js判断变量是否未定义的代码
Mar 28 #Javascript
jquery判断浏览器类型的代码
Nov 05 #Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 #Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 #Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 #Javascript
JS TextArea字符串长度限制代码集合
Oct 31 #Javascript
JS 控件事件小结
Oct 31 #Javascript
You might like
DIY实用性框形天线
2021/03/02 无线电
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
基于node.js之调试器详解
2017/08/22 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
详解vue路由
2020/08/05 Javascript
python对html代码进行escape编码的方法
2015/05/04 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
中职生自我鉴定范文
2013/10/03 职场文书
优秀员工自荐书
2013/12/19 职场文书
创先争优公开承诺书
2014/08/30 职场文书
教师节倡议书
2014/08/30 职场文书
护理培训心得体会
2016/01/22 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis