在实际的应用开发中,我们会常常用到JS的模事件,但有时会遇到一些问题,比如说点击事件,举个简单的例子,点击表单外的“提交”按钮来提交表单。上代码吧。
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 接口并支持该方法。
参考资料:http://www.w3school.com.cn/xmldom/met_document_createevent.asp
本文链接:http://www.woiweb.net/js-simulate-click-event.html
分享到:
相关推荐
js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码
主要介绍了javascript触发模拟鼠标点击事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
代码如下:<...<head>...javascript模拟鼠标自动点击链接</title>[removed]var mytime = 1000; function myclick(){[removed].reload(); }function autoclick(){setTimeout(“myclick()”,my
js模拟鼠标点击,这个是一个国外网站上下载的js模拟鼠标点击的脚本。不会破坏布局。放心使用
httpunit Java模拟JS点击事件,里面提供了详细的使用文档和异常解决方案
原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击...
1.用隐藏iframe来加载广告页面。 代码如下: <!一开始我们就使用一个看不到的框架ID名为:framelink–> <...–写一个JS模拟点击ID为“myLink”的A连接并设定相关的属性–> <SCRIPT language=JavaScript type=t
} [removed] 这有时候是无法执行模拟点击的. 需要加上一句代码就可以了. 代码如下: [removed] ///模拟按钮点击事件,插入数据 function addTmpDataApp() { document.<%=formCC.ClientID %>.
Qt QWebview调用JS,实现QQ邮箱自动填写输入框,模拟鼠标点击网页按钮!!
在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的“提交”按钮来提交表单。上代码吧
主要介绍了JS简单模拟触发按钮点击功能的方法,涉及JavaScript事件调用机制及事件触发的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
// 触发了a标签的点击事件,但是没有触发页面跳转 document.getElementById(“alink”).click(); //既触发了a标签的点击事件,又触发了页面跳转 把 “下一步” 改为 “”spanId”>下一步” 即给A标签中的文字添加一...
模拟手动点击芭芭农场任务,并且自动完成点击任务
本文实例讲述了JS模拟按钮点击功能的方法。分享给大家供大家参考,具体如下: <html> <head> <title>usually function</title> </head> [removed] function load(){ //下面两...
Javascript 模拟点击事件,一般情况下ie支持的,firefox并不支持。所以可以通过下面的方法解决。
jQuery模拟JS警告、确认、提示弹出对话框效果.rarjQuery模拟JS警告、确认、提示弹出对话框效果.rarjQuery模拟JS警告、确认、提示弹出对话框效果.rar
操作说明:在窗口中任意位置点击鼠标,程序将在两点间画线; 并通过拟合曲线算法,对曲线平滑处理; 回车将进行轨迹回放! 经测试IE,FIREFOX都可运行! 工作原理:在页面中动态添加div块的方式,模拟画线。 作者...