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();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,082评论 6 13
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • 礼拜天看彭小六新出的书《颠覆平庸》,他的第一个章节时间管理让自己每一分钟实现价值最大化。时间管理分大块时间的利用,...
    圆媛圆媛阅读 1,615评论 0 3
  • 文/思小妞 (一) 说实话,对于一位曾在12年前参加过高考的人来说,即便高考离我已经这么遥远了,但我还是发自肺腑的...
    思小妞无后缀阅读 2,785评论 59 96
  • 坚强是一堵墙, 谎言是你的影子, 笔直的映在墙上。
    渡厄肚饿阅读 215评论 0 2