js模拟实现a标签点击下载图片

1. 实现模拟点击a标签下载图片

使用界面
html代码：<a href="../img/img.jpg" download="img">download-img</a>

1.1 无效操作

$("a").click(function () {
    console.log("a click");
});
$("a").click();

相信很多人和我的第一想法一样，但是这是没有效果的。执行$("a").click()时，会打印输出，但是不会执行下载操作。相似问题stackoverflow

失效原因：用juery的click方法会忽略掉a标签的href属性，不会执行默认的操作（下载文件），而是去执行绑定的click事件。

1.2 解决办法1

• 利用js原生的click()方法

$("a")[0].click(); // 或者$("a").get(0).click();等等

1.3 解决办法2

• 利用事件冒泡的方式，但是这要修改页面html结构

<a href="../img/img.jpg" download="img">download-img<span></span></a>

$("span").click(function () {
    console.log("span click");
});
$("span").click();