當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

记HTML5 a 标签的一个小坑

發布時間：2023/12/2 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了记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函數：

歡迎關注我的公眾號：老干部的大前端，領取21本大前端精選書籍！

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的记HTML5 a 标签的一个小坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

标签

上一篇：不一样的ZTree，权限树.js插件
下一篇： 2017年html5行业报告,云适配发布