前端开发a标签中的href=““和href=“JavaScript:；“不同收录

简述

a元素只要添加href属性就相当于添加了默认的跳转事件。
这是a元素自带的，可以使用js“e.preventDefault()”来阻止元素自带的默认事件。
而href=“”代表的本页面到本页面的跳转，而不是什么都没有；
而href="javascript:;"代表的是使用js代码来代替这个跳转事件，而冒号后面的js代码空，所以就是不执行任何js操作，开发中有时会加上“void(0)”这是合理的写法。

详解

在HTML中，a 标签定义了超链接，其 href 属性用于指定链接的目标地址。下面分别解释 href=“” 和 href=“JavaScript:;” 的区别：

href=“”:

当 href 属性为空字符串时，根据规范和不同的浏览器行为，这种链接可能被处理为尝试导航到当前页面的根路径，或者在某些情况下，它可能导致页面的刷新。这是因为浏览器尝试解析一个空的URL，可能会将其当作对当前页面的引用。此外，早期的浏览器中，这样的链接可能会导致页面跳转到页面的顶部。现代浏览器通常会避免这种刷新或跳转行为，但为了兼容性和明确性，不建议仅使用空的 href。

href=“JavaScript:;”:

使用 javascript: 伪协议可以让 a 标签执行JavaScript代码而不是导航到一个新的页面。在这种情况下，javascript:;" 执行的代码是 void(0)，这是一个JavaScript表达式，它返回 undefined 并且不执行任何操作。这意味着点击链接时，页面不会刷新也不会跳转，同时允许你通过JavaScript（比如 onclick 事件）来处理链接的点击动作，非常适合那些需要执行脚本逻辑而不是页面跳转的情况。这种方法可以防止因点击链接而导致的不必要的页面滚动或刷新问题，是实现JavaScript触发动作的常见方式之一。

综上所述，href=“” 可能会导致页面刷新或不预期的导航行为，而 href=“JavaScript:;” 则是一种更安全的方式，用来阻止默认的链接行为并允许通过JavaScript自定义点击处理，确保页面状态不变。

href 属性为空时，会刷新页面，相当于访问当前页面。这可能导致safari表现不一致，可以尝试在 setTimeout 中使用 location.hfef 。
而 href 中的 javascript: 是协议名，同 http: ，它告诉浏览器后面的内容是JavaScript代码。因此在点击了标签之后，虽然浏览器同样会执行导航的动作，但不会刷新页面，此时导航的目标不是某个页面了，而是一段代码。浏览器会在全局环境中执行这段代码。href="javascript:;"让浏览器执行了一段空的JavaScript代码，所以你也可以看到这样的写法href=“javascript: void(0);”。
因为void运算符会返回undefined，所以和空JavaScript效果是一样的。
这种写法的作用是取消标签的默认行为，即页面跳转。

了解更多知识请戳下：

@Author:懒羊羊