当把a标签作为按钮来用时,会有一个问题:a标签被点击时,会发生跳转;为解决此问题,我特意研究的a标签的跳转行为,总结如下:
- 在以下情况,点击 a 标签不会发生跳转:即不会触发加载资源,也不返回到页面顶部:
- a 标签的 href 标签属性的属性值为以
#
开头 且#
后有它非空格字符 的 字符串,如:<a href="##"></a>
、<a href="#任何字符串"></a>
; - 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>`;备注:关于void,请参考《JavaScript的发现与理解》; - 在a 标签的 与点击相关的事件的处理器中调用是事件对象
event
的preventDefault()
方法来阻止 a 标签的默认操作----跳转;
- a 标签的 href 标签属性的属性值为以
- 在以下情况,点击 a 标签会触发加载 a 的标签属性 href 所指定的资源:
- a 标签的标签属性href的值是相对地址或者绝对地址;
- 在以下情况,点击 a 标签会触发重新加载当前的页面:
- a 标签没有 href 标签属性,如:
<a></a>
; - a标签有 href 标签属性,但 href 标签属性没有值,如:
<a href></a>
; - a 标签的 href 标签属性的属性值为空字符
""
或 只有空格的字符串" "
,如:<a href=""></a>
、<a href=" "></a>
; - a 标签的 href 标签属性的属性值为以
?
开头的字符串,如:<a href="?"></a>
、<a href="?任意字符串"></a>
;
- a 标签没有 href 标签属性,如:
- 在以下情况,点击 a 标签不会触发加载资源,但回返回到页面顶部:
- a 标签的 href 标签属性的属性值为以
#
开头 且#
后没有其它非空格字符 的 字符串,如:<a href="#"></a>
、<a href="# "></a>
;
- a 标签的 href 标签属性的属性值为以