void關鍵字介紹
首先,void關鍵字是javascript當中非常重要的關鍵字,該操作符指定要計算或運行一個表達式,但是不返回值。
語法格式:
void func()
void(func())
實例1
當點擊超級鏈接時,什麼都不發生。
<!-- 1.當用戶鏈接時,void(0)計算爲0,用戶點擊不會發生任何效果 -->
<a href="javascript:void(0);">單擊此處什麼都不會發生</a><br>
實例2
執行void操作符當中的代碼
<!-- 2.執行 void() 操作符中的代碼 -->
<a href="javascript:void(alert('彈出的內容'))">點我彈出警告框</a><br>
<a href="javascript:void(console.log('輸出到控制檯的內容'))">點我輸出到控制檯</a><br>
實例3
計算void操作符當中的算術
html & js:
<button type="button">點擊按鈕</button>
<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>
控制檯輸出:
a => undefined
b => 2
c => 3
d => undefined
很顯然,2賦值給了b, 3賦值給了c, a 和 d一樣只是定義了沒有賦值,所以爲 undefined
# 與 javascript:void(0)的區別:
# 可以跳轉到設置了id的目的地
javascript:void(0)則停留在原地,一動不動,我們稱之爲“死鏈接”
如下面這個例子:
當點擊第一個鏈接時,一動不動
當點擊第二個連接時,會跳轉到指定id得位置
<a href="javascript:void(0);">點擊,一動不動</a>
<a href="#destination">點我跳轉</a>
<br><br><br>
<h2 id="destination">目的地</h2>