javascript:void() 和 herf="#" 区别

javascript:void(0) 和 herf="#" 区别

本文内容参考菜鸟教程(大部分都是原文内容)原文地址

javascript:void(0) 的含义

我们经常会使用到 javascript:void(0) 这样的代码，那么在 javascript 中 javascript:void(0) 中代表的是什么呢？

javascript:void(0) 中最关键的是 void 是JavaScript 中非常重要的关键字，操作符指定计算一个表达式但是不返回值。

语法格式如下：

  void function()
  javascript:void func()

或者

  void (func())
  javascript:void(fuc())

举例：下面的超链接，点击不会发生任何事。

  <a href="javascript:void(0)">单击此处什么也不会发生 </a>

当用户链接时，void(0) 计算为0,但 JavaScript 没有任何效果。

也可以像下面：

  <a href="javascript:void(alert('测试'))">单击此处什么也不会发生 </a>

返回值的情况：undefined

  var a = void(5)

herf="#"

# 包含了一个位置信息，默认的锚是 #top 网页顶端。页面很长的时候可以使用 # 来定位页面的具体位置，格式为： #+id 。

  <!-- 点击链接，跳到页面里的 id 为 pos 的位置-->
  <a herf='#pos'>点击定位到指定的位置</a>
  <br/>
  ...
  <br/>
<p id='pos' >尾部定位点<p/>

herf="#" 和 JavaScript：void(0)的区别

javascript:void(0) 是一个死链接。

herf="#" 可以定位到页面的指定位置。

总结 + 补充

void() 仅仅只是不返回任何值而已，但是括号内的表达式还是会运行。

// 阻止链接跳转，URL不会有任何变化
<a href="javascript:void(0)" rel="nofollow ugc">点击此处</a>

// 虽然阻止了链接跳转，但URL尾部会多个#，改变了当前URL。（# 主要用于配合 location.hash）
<a href="#" rel="nofollow ugc">点击此处</a>

// 同理，# 可以的话，? 也能达到阻止页面跳转的效果，但也相同的改变了URL。（? 主要用于配合 location.search）
<a href="?" rel="nofollow ugc">点击此处</a>

// Chrome 中即使 javascript:0; 也没变化，firefox中会变成一个字符串0
<a href="javascript:0" rel="nofollow ugc">点击此处</a>