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

原创 2017年10月12日 09:58:20

今天写了段简单的代码,点击<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 canvas标签的全屏、退出全屏,canvas中显示的缩放、移动,小坑盘点

选择任意标签全屏显示,这儿是canvas,触发函数绑在按钮上: 此处没坑 $('#tab_fullScreen').click(function(){ fullScreen(); }); ...

HTML5移动开发(9)——从一个多媒体标签说起

一、视频播放 html>       head>           title>多媒体播放title>       head>       body>    ...

小强的HTML5移动开发之路(12)——从一个多媒体标签说起

一、视频播放 多媒体播放 效果如下:

第四讲:使用html5中的canvas标签画出一个球在指定区域内的运动

小球在一个区域运动 var canvas = document.getElementById('mc'); var cxt = canvas.getCo...

小强的HTML5移动开发之路(12)——从一个多媒体标签说起

来自:http://blog.csdn.net/dawanganban/article/details/18136813一、视频播放html>      head>          title>多媒...

web项目引用html5 video标签实现视频播放的坑

最近项目中用到视频播放,打算采用html5 的video标签实现网页视频播放,考虑到兼容性与样式又采用了jquery的video.js插件,使用过程中视频播放都没问题,但是在视频播放的时候运行容器(j...

【Android】记今天踩到的一个小坑----Java内存模型

今天在写一个RecyclerView的Demo,大致的状况就是请求网络分页加载数据,解析成bean然后填到列表里,展示瀑布流出来.但是写完之后列表却一直都是空的,但是断点里也能清楚地看到数据解析成功,...
  • lchad
  • lchad
  • 2016年03月15日 23:49
  • 760

记 Integer 的一个小坑

最近用 Java 刷算法题的时候发现 Integer 有一个小坑,我把当时的代码简化如下:public class Learn { public static void main(String...

Html5中的<section>标签

本文导读: 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。section元素标签用来表现普通的文档内容或应用区块。一个section通常由内容及其标题组成,但se...

关于HTML5中Video标签无法播放mp4的解决办法

1、首先先排除掉代码问题、路径问题、浏览器不支持问题等。 2、首先我自己从网上下载的一个MP4文件,IE10和谷歌都能正常播放。然后自己用格式化工厂转换了一个RMVB文件为MP4,然后就...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:记HTML5 <a> 标签的一个小坑
举报原因:
原因补充:

(最多只允许输入30个字)