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 相关文章推荐
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
js与applet相互调用的方法
Jun 22 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
PHP输出时间差函数代码
2013/01/28 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
python 获取等间隔的数组实例
2019/07/04 Python
python实现超市商品销售管理系统
2019/10/25 Python
python 实现多维数组转向量
2019/11/30 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
建筑工程实习自我鉴定
2013/09/19 职场文书
优秀老师事迹材料
2014/02/05 职场文书
村长贪污检举信
2014/04/04 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
python字典的元素访问实例详解
2021/07/21 Python