詳解javascript void(0)

更新時(shí)間：2020年07月13日 15:29:47 作者：小方哥·

這篇文章主要介紹了javascript void關(guān)鍵字的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下

void關(guān)鍵字介紹

　　首先，void關(guān)鍵字是javascript當(dāng)中非常重要的關(guān)鍵字，該操作符指定要計(jì)算或運(yùn)行一個(gè)表達(dá)式，但是不返回值。

　　語法格式：

void func()
void(func())

實(shí)例1

　　當(dāng)點(diǎn)擊超級鏈接時(shí)，什么都不發(fā)生

<!-- 1.當(dāng)用戶鏈接時(shí)，void(0)計(jì)算為0,用戶點(diǎn)擊不會發(fā)生任何效果 -->
  <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" >單擊此處什么都不會發(fā)生</a><br>

實(shí)例2

　　執(zhí)行void操作符當(dāng)中的代碼

<!-- 2.執(zhí)行 void() 操作符中的代碼 -->
  <a href="javascript:void(alert('還真點(diǎn)啊你，真聽話！?。」。?！'))" rel="external nofollow" >點(diǎn)我彈出警告框!!!</a><br>
  <a href="javascript:void(console.log('還真點(diǎn)啊你，真聽話?。?！哈哈哈！??！'))" rel="external nofollow" >點(diǎn)我輸出到控制臺!!!</a><br>

實(shí)例3

　　計(jì)算void操作符當(dāng)中的算術(shù)

html:

<button type="button">點(diǎn)我</button>

js:

<script type="text/javascript">
    document.querySelector('button').addEventListener('click', function () {
      var a, b, c, d;
      a = void(b = 2, c = 3);
      console.log('a => ' + a);
      console.log('b => ' + b);
      console.log('c => ' + c);
      console.log('d => ' + d);
    });
  </script>

控制臺輸出：

很顯然，2賦值給了a, 3賦值給了b, a 和 d一樣只是定義了沒有賦值，所以為 undefined

#與 javascript:void(0)的區(qū)別:

#可以跳轉(zhuǎn)到設(shè)置了id的目的地
javascript:void(0)則停留在原地，一動不動，我們稱之為“死鏈接”

如下面這個(gè)例子：

<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" >你點(diǎn)吧，反正我就是不動，嘿嘿嘿?。?！</a><br>
  <a href="#destination" rel="external nofollow" >點(diǎn)我跳轉(zhuǎn)</a>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <h2 id="destination">目的地</h2>