踩坑之a标签的href问题

今天写一个回顶动画，想着点击跳转之类的应该归a标签的工作，感觉so easy。但是写好之后，我写的动画却完全不起作用，于是开启了长达一个小时的探索。

首先归类一下a标签的点击事件的两种写法：

1.点击事件

aId.onclick = function(){

   };

2.监听点击事件

aId.addEventListener("click",function(){

});

对于写法一，首先我令a标签的href为空，

而其点击事件后不添加return false，如下：

动画失败

点击事件后打开return false; 如下：

动画成功

然后，我再令href = "#",

点击事件下不添加return false；如下：

动画失败

点击事件后打开return false; 如下：

动画成功

最后，令href = "javascript:;"

点击事件下不添加return false；如下：

动画成功

点击事件后打开return false; 如下：

动画成功   

对于写法二，首先a标签的href为空，

而监听其点击事件后不添加return false，如下：

动画失败

监听其点击事件后添加return false，如下：

动画失败

然后，我再令href = "#",

监听点击事件下不添加return false；如下：

动画失败

监听点击事件下添加return false；如下：

动画失败

最后，令href = "javascript:;"

监听点击事件下不添加return false；如下：

动画成功

监听点击事件下添加return false；如下：

动画成功

总结：

点击事件：只要加return false; 都可以实现动画；而如果不加return false; 则只有href = "javascript:;"时可以实现动画。

监听点击事件：只有在href = "javascript:;"时，无论加不加return false; 都可以实现动画，而其他方式不可以实现。

在项目中，考虑到点击叠加失效，所以使用监听点击事件最保险。