100

记HTML5 <a> 标签的一个小坑

 6 years ago
source link: https://juejin.im/post/59dec7d66fb9a04527249457
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

记HTML5 <a> 标签的一个小坑

2017年10月12日 01:47 ·  阅读 6359

今天写了段简单的代码，点击<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 onclick="download()">下载</a>
</body>
</html>
复制代码

<script>内明明已经定义了download函数，为什么还会报download is not a function的错误呢?

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

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

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

161d12c4d5ec1c3f~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK