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

当把a标签作为按钮来用时,会有一个问题:a标签被点击时,会发生跳转;为解决此问题,我特意研究的a标签的跳转行为,总结如下:

  1. 在以下情况,点击 a 标签不会发生跳转:即不会触发加载资源,也不返回到页面顶部:
    • a 标签的 href 标签属性的属性值为以 # 开头 且 # 后有它非空格字符 的 字符串,如: <a href="##"></a><a href="#任何字符串"></a>
    • a 标签的 href 标签属性的属性值为以 javascript: 开头 且 javascript: 后面的代码没有返回任何东西 或者 返回为 undefinednullvoid 或者 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 标签的 与点击相关的事件的处理器中调用是事件对象 eventpreventDefault() 方法来阻止 a 标签的默认操作----跳转;
  1. 在以下情况,点击 a 标签会触发加载 a 的标签属性 href 所指定的资源:
    • a 标签的标签属性href的值是相对地址或者绝对地址;
  1. 在以下情况,点击 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>
  1. 在以下情况,点击 a 标签不会触发加载资源,但回返回到页面顶部:
    • a 标签的 href 标签属性的属性值为以 # 开头 且 # 后没有其它非空格字符 的 字符串,如: <a href="#"></a><a href="# "></a>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容