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动态加载以及确定加载完成的代码
Jul 31 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
树结构之JavaScript
Jan 24 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
深入了解JavaScript词法作用域
Jul 29 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安装攻略:常见问题解答(三)
2006/10/09 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
python进阶_浅谈面向对象进阶
2017/08/17 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
《沉香救母》教学反思
2014/04/19 职场文书
庆七一活动总结
2014/08/27 职场文书
信访维稳承诺书
2015/05/04 职场文书
八月迷情观后感
2015/06/11 职场文书
2016新年致辞
2015/08/01 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技