記HTML5 <a> 標籤的一個小坑

艾特老幹部發表於2017-10-12
HTML

今天寫了段簡單的程式碼，點選<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本大前端精選書籍！

記HTML5 <a> 標籤的一個小坑

相關文章