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 相关文章推荐
JS逆序遍历实现代码
Dec 02 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
Vue使用虚拟dom进行渲染view的方法
Dec 26 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
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
解析strtr函数的效率问题
2013/06/26 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
vue element upload实现图片本地预览
2019/08/20 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
python实现简单图片物体标注工具
2019/03/18 Python
Python中的self用法详解
2019/08/06 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
python求前n个阶乘的和实例
2020/04/02 Python
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
大学自荐信
2013/12/12 职场文书