阻止a标签跳转的各种解决方案

1、在以下情况，点击 a 标签不会发生跳转：即不会触发加载资源，也不返回到页面顶部：

1）a 标签的 href 标签属性的属性值为以 # 开头 且 # 后有它非空格字符 的 字符串，如: <a href="##"></a> 、 <a href="#任何字符串"></a>；

2）a 标签的 href 标签属性的属性值为以 javascript: 开头 且 javascript: 后面的代码没有返回任何东西 或者 返回为 undefined 、 null 、 void 或者 void表达式，如:<a href="javascript:"></a> 、 <a href="javascript:undefined"></a>、 <a href="javascript:null"></a>、<a href="javascript:void"></a>、<a href="javascript:undefined"></a>、<a href="javascript:void()"></a>；`
3）在a 标签的 与点击相关的事件的处理器中调用是事件对象 event 的 preventDefault() 方法来阻止 a 标签的默认操作----跳转；

2、在以下情况，点击 a 标签会触发加载 a 的标签属性 href 所指定的资源：

a 标签的标签属性href的值是相对地址或者绝对地址；

3、在以下情况，点击 a 标签会触发重新加载当前的页面：

1）a 标签没有 href 标签属性，如: <a></a>；
2）a标签有 href 标签属性，但 href 标签属性没有值，如: <a href></a>；
3）a 标签的 href 标签属性的属性值为空字符 “” 或 只有空格的字符串 " "，如: <a href=""></a> 、 <a href=" "></a>；
4）a 标签的 href 标签属性的属性值为以 ? 开头的字符串，如: <a href="?"></a> 、 <a href="?任意字符串"></a>；

4、在以下情况，点击 a 标签不会触发加载资源，但回返回到页面顶部：

a 标签的 href 标签属性的属性值为以 # 开头 且 # 后没有其它非空格字符 的 字符串，如: <a href="#"></a> 、 <a href="# "></a>；

转自：https://www.jianshu.com/p/5576a1c4c55d