内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

一次HTML5 <a>标签的小坑

2017-10-12 16:59 出处:清屏网 人气: 评论(0

今天写了段简单的代码,点击<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>
分享给小伙伴们:
本文标签: HTML5

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号