没有找到合适的产品?
联系客服协助选型:023-68661681
提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
原创|其它|编辑:郝浩|2010-01-27 10:24:54.000|阅读 3536 次
概述:单击一个按钮或超链接,然后会出现其他的超链接,这时要让其中的一个超链接被单击,以显示一个初始页面。(公司页面使用了frameset)很显然,之后的超链接单击事件需要通过JavaScript来触发。
# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>
公司项目想要实现一种功能:
单击一个按钮或超链接,然后会出现其他的超链接,这时要让其中的一个超链接被单击,以显示一个初始页面。(公司页面使用了frameset)很显然,之后的超链接单击事件需要通过JavaScript来触发。
一开始,我想到了用jQuery的click()事件来触发超链接的单击事件(与trigger("click")一样的效果)。结果发现不如人意。
实例如下:
Html代码
h3>请单击”Click Me"。测试提交按钮与超链接是否也被单击了。</h3>
<button id="btn">Click Me</button>
<form action="#">
<input type="text" name="userName" value="徐新华-polaris" readonly/>
<input id="submit" type="submit" value="别点击此按钮提交" onclick="alert('触发了提交按钮的单击事件!');"/>
</form>
<a id="aLink" href="http://www.google.cn" onclick = "alert('触发了超链接的单击事件!');">代码触发超链接</a>
Javascript代码
$(function() { $("#btn").click(function() { $("#submit").click(); $("#aLink").click(); }); }); |
当单击:Click Me按钮时,先后弹出提交按钮被单击、超链接被单击的对话框,这表明两者的单击事件都被触发了。然而,从地址栏中可以看到,提交按钮的单击事件触发后,执行了它的默认行为:提交表单;可是超链接的单击事件触发后,并没有链接到目标地址。(不要怀疑说是提交按钮的提交地址对超链接有影响,因为我去掉提交按钮,只留下超链接也不会链接到目标地址。)
也许jQuery中的click()方法对超链接的单击事件并没有使其执行浏览器的默认行为(即使你手动加入return true也没有用)。注意:tigger("click")与click()一样的。jQuery文档中说“这个函数也会导致浏览器同名的默认行为的执行”。同名的?不太明白,但是超链接的确不能执行它的默认行为。这是,只能想另外的方法——抛弃jQuery提供的事件。
回到JavaScript自己的事件——click。代码如下:
Javascript代码
$(function() { $("#btn").click(function() { $("#submit").click(); $("#aLink").get(0).click(); }); }); |
在IE中一测试,通过了……有点兴奋。可是,在fireFox中却提示:click()不是一个function。说真的,IE浏览器提供的东西对开发人员来说很好,而fireFox却没有,比如之前说到的onpropertychange等。不过,我们必须的考虑IE之外的浏览器。在网上查资料,有不少人提到在fireFox中要用代码触发一个事件,需要如下处理:
Javascript代码
var evt = document.createEvent("MouseEvents"); evt.initEvent("click", false, false);// 或用initMouseEvent(),不过需要更多参数 $("#aLink").get(0).dispatchEvent(evt); 按以上方法来实现我想要的功能,代码如下: Javascript代码 $(function() { $("#btn").click(function() { $("#submit").click(); if($.browser.msie) { $("#aLink").get(0).click(); } else { var evt = document.createEvent("MouseEvents"); evt.initEvent("click", false, false); $("#aLink").get(0).dispatchEvent(evt); } }); }); |
这时,在IE中是完全正常的。然而,在fireFox中的情况与直接使用jQuery的click()事件一样,能触发单击事件,超链接却没有转到目标地址(注意:提交按钮用此方法也是能够提交的,我想jQuery的click()的实现大概是这样实现的吧)。哎,觉得还是IE好。呵呵。
如此一来,这种方法仍然不能解决FireFox中的问题。得继续寻找其他方法。
既然在fireFox中能够触发单击事件,却不能转到超链接的目标地址,那么,可以用js来实现跳转,即:使用location对象。代码如下:
Javascript代码
$(function() { $("#btn").click(function() { $("#submit").click(); if($.browser.msie) { $("#aLink").get(0).click(); } else { // 绑定单击事件 $("#aLink").click(function() { document.location = $(this).attr("href");// window.location = $(this).attr("href");也可以,但是执行的时间不同 }); // 触发单击事件 $("#aLink").click(); } }); }); |
这样就大功告成。有一个地方要说明一下:document.location与window.location。这两个都可以,然而他们的执行时间不同,window的执行时间较早。读者可以自己试试。
虽然实现了这个例子,然而,运用到项目中却出问题了,因为项目中使用了frameset(虽然现在很多人不建议使用frameset,但项目用了也没办法,得这样做)。因此需要指定链接的目标url在哪个frame中显示,然而,通过中的target是无法实现的,因为根本不会执行默认行为,需要通过js来实现。中写上target,如之类的。希望按target的要求触发超链接。当然,这是非IE浏览器有的问题。
我们知道,document代表当前的页面(当前执行元素所在页面)。如果我们能够找到当前超链接的url希望放入的frame,我们就可以找到它对象的document。当然找到超链接url希望放入的frame很容易,这是由你自己决定将其放到哪的。示例代码如下:
Javascript代码
document.location = $("#aLink").attr("href"); |
其中,'view'是超链接url希望放入的frame的name或id(最好是id和name命名一样)。建议IE中别用上面的方法,而用前面介绍的click()方法。
现在已经解决了所有的问题。可能还有人会有这种需求:就是在
实际上,下面我要介绍的方法是通用行的。可以替代window.parent.frames['view'].document.location。代码如下:
Javascript代码
window.open($(this).attr("href"),$(this).attr("target")); |
如果没有定义target属性,默认会当成'_blank'处理,这与用户单击超链接的效果不一样。这种方式是跨浏览器的,所以,只需要要用这种方式即可。这时,回到用jQuery+原始JavaScirpt来实现,这时最终、个人认为最好的方法。完整最终代码如下:
Html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript模拟用户单击事件——徐新华 polaris</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入jQuery --> <script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script> <script type="text/javascript"> /** * 模拟用户单击事件 处理超链接的问题 * @author xuxinhua */ $(function() { $("#btn").click(function() { $("#submit").click(); // 绑定单击事件 $("#aLink").click(function() { window.open($(this).attr("href"),$(this).attr("target")); }); // 触发单击事件(会执行所有绑定的单击事件处理函数) $("#aLink").click(); }); }); </script> </head> <body> <h3>请单击”Click Me"。测试提交按钮与超链接是否也被单击了。</h3> <button id="btn">Click Me</button> <form action="#"> <input type="text" name="userName" value="徐新华-polaris" readonly/> <input id="submit" type="submit" value="别点击此按钮提交" onclick="alert('触发了提交按钮的单击事件!');"/> </form> <a id="aLink" href="http://www.google.cn" target="_self" onclick = "alert('触发了超链接的单击事件!');">代码触发超链接</a> </body> </html> |
注意:需要此处需要先绑定一个click处理函数,然后再触发click事件
总结:
网上有一些JavaScript模拟用户单击事件的文章,但是都不全面,总会有这样那样的问题。虽然,我在此列举了众多的方法,觉得基本的问题都应该解决了,然而还是有可能有人遇到新的问题。
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com
文章转载自:网络转载面对“数字中国”建设和中国制造2025战略实施的机遇期,中车信息公司紧跟时代的步伐,以“集约化、专业化、标准化、精益化、一体化、平台化”为工作目标,大力推进信息服务、工业软件等核心产品及业务的发展。在慧都3D解决方案的实施下,清软英泰建成了多模型来源的综合轻量化显示平台、实现文件不失真的百倍压缩比、针对模型中的大模型文件,在展示平台上进行流畅展示,提升工作效率,优化了使用体验。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@evget.com
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢
慧都科技 版权所有 Copyright 2003-
2025 渝ICP备12000582号-13 渝公网安备
50010702500608号