Firefox下代码触发a标签的click事件无效

最新推荐文章于 2024-05-29 01:17:02 发布

Terisadeng

最新推荐文章于 2024-05-29 01:17:02 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： a Firefox click无效

本文链接：https://blog.youkuaiyun.com/dongyuxu342719/article/details/85329028

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文解决了一个在不同浏览器中实现文件下载的问题，特别是在Chrome和Firefox之间的兼容性难题。通过使用JavaScript创建a标签并触发click事件，文章详细介绍了如何让这一过程在所有主流浏览器上都能顺利进行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面中通过document.createElement('a');创建一个a标签，然后给a标签的href属性赋url，通过代码触发a标签的click事件请求后台，在Chrome浏览器中请求正常，但是在Firefox中始终无效，debugger发现代码也走到了a.click()方法，但是就是没反应。

var groupId = $('#groupId').val();
var userId = $('#userId').val();
var url = "${ctx}/../jsp/groupFileInfo/downLoadGroupFile.action?groupFileId="
		+ groupFileId + "&groupId=" + groupId + "&userId=" + userId;
var a = document.createElement('a');
var filename = 'data.xlsx';
a.href = url;
a.download = filename;
a.click();

网上看到有人说判断document.all来决定怎样调用click事件：

if(document.all) {
  a.click();
} else {  
    var evt = document.createEvent("MouseEvents");  
    evt.initEvent("click",true,true);  
    a.dispatchEvent(evt); 
}

但是仍然不行，再次debugger发现，在Firefox下document.all不为空，因此还是执行的a.click()方法，改为不判断document.all，直接创建鼠标事件对象调用：

var evt = document.createEvent("MouseEvents");  
evt.initEvent("click",true,true);  
a.dispatchEvent(evt);

这种方式在Chrome和Firefox下都是成功执行的。