鱼C论坛

 找回密码
 立即注册
查看: 3030|回复: 1

[技术交流] JS模拟点击的那些事儿

[复制链接]
发表于 2015-7-24 17:08:08 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x

在实际的应用开发中,我们会常常用到JS的模事件,但有时会遇到一些问题,比如说点击事件,就拿昨天我们鱼C论坛一个学员遇到的问题来说吧,点击表单外的“提交”按钮来提交表单。上代码吧。
Html:
Html代码   
1.        <h3>请单击“提交”,测试提交按钮的单击事件也被触发了。</h3>  
2.        <button id="btn">提交</button>  
3.        <form action="#" method="get" id="form">  
4.          <input type="text" name="site" value="www.woiweb.net" readonly/>  
5.          <input id="subbtn" type="submit" value="先别点击此按钮提交" onclick="alert('我已经提交了');"/>  
6.        </form>  

Javscript:
Js代码   
1.        <script type="text/javascript">  
2.          var sub = document.getElementById("subbtn");  
3.          var btn = document.getElementById("btn");  
4.        //通用方法  
5.        btn.onclick = function() {  
6.        sub.click();  
7.        }  
8.        </script>  

经过测试,IE,FF,Chrome,Opera,Safari都没有问题,均可正常提交表单。
但在实际的设计中,为了让提交按钮更好看,buildder经常把它们用a标签来处理,加个背景图片来模拟按钮,我们仍然用上面的思路来尝试,增加一个a标签,让它来提交表单,我们仅修改html。
Html:
Html代码   
1.        <h3>请单击“提交”,测试提交按钮的单击事件也被触发了。</h3>  
2.        <button id="btn">提交</button>  
3.        <form action="#" method="get" id="form">  
4.          <input type="text" name="site" value="www.woiweb.net" readonly/>  
5.          <!--<input id="subbtn" type="submit" value="先别点击此按钮提交" onclick="alert('我已经提交了');"/> -->  
6.          <a id="subbtn" href="javascript:;" onclick="alert('在此调用提交表单的方法')">模拟提交按钮</a>  
7.        </form>  

Javascript:
Js代码   
1.        <script type="text/javascript">  
2.          var sub = document.getElementById("subbtn");  
3.          var btn = document.getElementById("btn");  
4.        //通用方法  
5.        btn.onclick = function() {  
6.        sub.click();  
7.        }  
8.        </script>  

运行后,问题出现了,IE、FF、Opera均OK,但Chrome和Safari不能正常运行,后来网上搜索了下,发现a标签并不是和按钮一样有onclick()事件的,解决办法是针对 IE 和 FF编写不同的逻辑,JS代码如下:
javascript:
Js代码   
1.        <script type="text/javascript">  
2.          var sub = document.getElementById("subbtn");  
3.          var btn = document.getElementById("btn");  
4.        //通用方法  
5.        btn.onclick = function() {  
6.           //sub.click();  
7.           if (/msie/i.test(navigator.userAgent)) //IE  
8.           {  
9.              sub.fireEvent("onclick");  
10.           } else {  
11.              var e = document.createEvent('MouseEvent');  
12.              e.initEvent('click', false, false);  
13.              sub.dispatchEvent(e);  
14.           }  
15.        }  
16.        </script>  

至此,问题解决,虽然这个问题很简单,但很容易被大家忽略,贴出来和鱼C论坛的各位学员一起分享。

语法:
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.maiziedu.com/course/java/
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2015-9-8 11:57:12 | 显示全部楼层
早先学习html的时候必备的。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 17:40

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表