記HTML5 標籤的一個小坑

時間 2019-11-06

標籤 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>

因而，按下面的步驟嘗試排查問題：函數

把<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/ta...。真相大白了，原來HTML 5 中的<a> 標籤新增了一個download屬性，規定被下載的超連接目標。因此，onclick執行時，download指向的是<a> 標籤對象中的download屬性，所以纔會拋出上面的錯誤。
既然找到了問題的緣由，除了避免使用download做爲函數名外，很容易想到另一個解決方案，經過window引用download函數：

<a onclick="window.download()">下載</a>

歡迎關注個人公衆號：老幹部的大前端，領取21本大前端精選書籍！ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。