js模拟点击以提交表单为例兼容主流浏览器

时间: 作者:个量

  

[js,模拟点击]js模拟点击以提交表单为例兼容主流浏览器

  在实际的应用开发中,我们会常常用到JS的模事件,但有时会遇到一些问题,比如说点击事件,举个简单雅星娱乐的例子,点击表单外的“提交”按钮来提交表单。上代码吧。

  
  
Html:  
代码如下:

  

请单击“提交”,测试提交按钮的单击事件也被触发了。

  
  
  
  
  
  
  
Javscript:  
代码如下:
  
  
var sub = document.getElementById("subbtn");  
var btn = document.getElementById("btn");  
//通用方法  
btn.onclick = function() {  
sub.click();  
}  
  
  
经过测试,IE,FF,Chrome,Opera,Safari都没有问题,均可正常提交表单。

  
  
但在实际的设计中,为了让提交按钮更好看,buildder经常把它们用a标签来处理,加个背景图片来模拟按钮,我们仍然用上面的思路来尝试,增加一个a标签,让它来提交表单,我们仅修改html。

  
  
Html:  
代码如下:

  

请单击“提交”,测试提交按钮的单击事件也被触发了。

  
  
  
  
  
模拟提交按钮  
  
  
Javascript:  
代码如下:
  
  
var sub = document.getElementById("subbtn");  
var btn = document.getElementById("btn");  
//通用方法  
btn.onclick = function() {  
sub.click();  
}  
  
  
运行后,问题出现了,IE、FF、Opera均OK,但Chrome和Safari不能正常运行,后来网上搜索了下,发现a标签并不是和按钮一样有onclick()事件的,解决办法是针对 IE 和 FF编写不同的逻辑,JS代码如下:  
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);  
}  
}  
  
  
至此,问题解决,虽然这个问题很简单,但很容易被大家忽略,贴出来和大家一起分享。

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

(责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 特效插件 | 常用代码 | 样式素材 | 脚本代码 | css特效

Copyright © 2017-2018 雅星娱乐 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 雅星娱乐