记HTML5 标签的一个小坑

时间 2019-11-17

标签 html5 html 标签一个小坑栏目 HTML5 繁體版

原文原文链接

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

<!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 onclick="download()">下载</a>
</body>
</html>
复制代码

因而，按下面的步骤尝试排查问题：bash

把<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 onclick="window.download()">下载</a>
复制代码

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