记HTML5 a 标签的一个小坑

今天写了段简单的代码，点击<a>标签时却抛出了这个错误：Uncaught TypeError: download is not a function。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><script>function download() {console.log(1);}</script>
</head>
<body><a οnclick="download()">下载</a>
</body>
</html>

于是，按下面的步骤尝试排查问题：

把<a>标签换成别的标签，尝试了<button>标签，结果点击按钮后，download函数就可以正常执行了，说明download函数是存在的，问题还出在<a>上。
把<button>改回<a>，修改download函数名为download1，结果download1是可以正常执行的。再联系Uncaught TypeError: download is not a function，怀疑<a>标签onclick方法执行时，查找到的download并非外部定义的download函数，onclick执行时的上下文对象应该已经存在download的定义了，且这个定义是一个属性，而不是函数。
于是查了下w3c的文档，http://www.w3school.com.cn/tags/att_a_download.asp 。真相大白了，原来HTML 5 中的<a> 标签新增了一个download属性，规定被下载的超链接目标。所以，onclick执行时，download指向的是<a> 标签对象中的download属性，因此才会抛出上面的错误。
既然找到了问题的原因，除了避免使用download作为函数名外，很容易想到另外一个解决方案，通过window引用download函数：

   <a οnclick="window.download()">下载</a>

欢迎关注我的公众号：老干部的大前端，领取21本大前端精选书籍！

更多专业前端知识，请上【猿2048】www.mk2048.com

记HTML5 a 标签的一个小坑相关推荐

记HTML5 a 标签的一个小坑 1
今天写了段简单的代码,点击<a>标签时却抛出了这个错误:Uncaught TypeError: download is not a function.代码如下: <!DOCTYPE ...
js中使用shiro标签的一个小坑
在jsp页面中使用shiro标签很简单 <shiro:haspermission name="你的权限"> 你的标签 </shiro:haspermission& ...
html5 websocket插件,html5实现的WebSocket一个小例子（附代码）
本篇文章给大家带来的内容是关于html5实现的WebSocket一个小例子(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 客户端代码: var socket; if (&q ...
[LeetCode]29 两数相除和一个小坑点
给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符.返回被除数 dividend 除以除数 divisor 得到的商.示例 1:输入: ...
mysql内核测试,MySQL 5.7内核复制中的一个小坑
问题背景最近在写一个作为MySQL Slave的角色的程序,连接到MySQL Master使用MySQL复制协议来Dump Binlog事件流.很自然,这个程序在第一次运行的时候,其事务GTIDSe ...
parallel的一个小坑
parallel介绍 parallel是一个很好用的linux并行软件,与linux自带的xargs功能类似,但比它更好用,关于parallel的安装及具体用法可以参考该文章:15分钟神器gnu pa ...
golang原生库mime/multipart上传formdata文件的一个小坑unexpected EOF
golang原生库mime/multipart上传formdata文件的一个小坑unexpected EOF 遇到的问题问题代码问题分析正确代码总结遇到的问题用mime/multipart ...
c 语言for 循环大到小,C语言中for循环问题（一个小坑需注意）
今天分享一下C语言中的for循环中我们常常忽略的小问题. 举一个小例子来说明,大家也可以自己先算一下哦 #define _CRT_SECURE_NO_WARNINGS #include #includ ...
Rocksdb Slice使用中的一个小坑
本文记录一下使用Rocksdb Slice过程中的一个小小坑,差点没一口老血吐出来. rocksdb的Slice 数据结构是一个小型得不可变类string数据结构,设计出来的目的是为了保证rocksd ...

记HTML5 a 标签的一个小坑

记HTML5 a 标签的一个小坑相关推荐

最新文章

热门文章