下午做为老大（他是做产品的）让我尝试破解一下kodexplorer（一个PHP做的文件管理工具），做为一名前端，完全根本就看不懂PHP。
就在我装模作样在百无聊赖的尝试的时候，QQ闪了。点开一看，是我一大学同学。
他给我发了一图，就是这张
然后问:“为何点击不能下载”
我下意识的让他给A标签添加一个download="true"试试。
回复:“还是不行”
想想也是正常。download是HTML5给A增加的一个新属性，作用是告诉浏览器这个链接的文件以下载的方式处理，download属性的值就是文件的名称(个人理解，具体定义可以去w3c搜一搜)。但在没有这个属性之前，当A标签链接是浏览器不能直接执行或者解析的文件时，默认就会变成下载。这里链接的是一个文件，所以应该是下载。是否添加download都该是同一个效果。
现在我们来看看
那还能有什么原因呢？我马上想到是js把A标签的默认事件阻止了。
然后我还问了问是不是标签交叉了，标签交叉不同浏览器会有些不同的表现，然后他告诉我并没了并且发了图片给我
图4
所以我认为很有可能是JS阻止了A标签的默认行为。并告诉了他如何处理。
然后我俩突然跳出了这个话题，聊了还一会之后。我问刚刚的问题解决了没有。回答没有，还是不知道怎么弄。
这里我get到了一个新玩意，TeamViewer。。。我之前一直都还是使用的QQ远程，和这个比一下真的差距太大了。连上远程之后，正好他也是用的Chrome，在Chrome浏览器里把A标签事件移除之后，果断点击有有了效果。所以肯定就是事件禁止了A标签的默认行为。
没有之前的截图，随便找了简书的莫个元素做个示例
其实那个remove我也是今天才发现的，才知道还可以这样玩。
最后确定是图4的div标签的data-toggle="buttons"引起的，去掉buttons就恢复正常。这边想去研究一下为啥boostrap会把A标签的默认行为给禁止了，我尝试了下载了一个bootstrap引用了一下，对照他的那个结构写了标签尝试了一下，没有复现出你的那个bug。data-toggle="buttons"在boostrap官网貌似并没有见过这个值，应该是引用了一些基于bootstrap的插件引起的问题。然后也就到下班的时间了，我也就没继续深究了
之前还遇到过一些a标签点击没反应的情况是，其它的层将a标签覆盖住了，导致a标签无法比点击到。
最后，只是简单写了一下bug的日常，所以很多知识并没有深入去解释。比如a标签的详细用法，download的官方解释和兼容性，Chrome开发者工具的使用等等。如果想详细了解，可以自行去百度。
最后，如果看完，不管你觉得我写得太屎还是有用，反正你也看到最后了，随便点个赞或者回复一下呗。
网友评论