JavaScript void 運(yùn)算符詳解
JavaScript void 運(yùn)算符
void定義:
void 運(yùn)算符對(duì)給定的表達(dá)式進(jìn)行求值,然后返回undefined。void是一個(gè)一元運(yùn)算符,接受單個(gè)操作數(shù),可以是任何類型,返回一個(gè) undefined。
void語法:
void 在表達(dá)式的左邊,void 右邊的表達(dá)式可以是帶括號(hào)形式(例如:void(0)),也可以是不帶括號(hào)的形式(例如:void 0)。
void作用:
當(dāng)我們只需要評(píng)估一個(gè)表達(dá)式而不是返回其值時(shí),void關(guān)鍵字的重要性就發(fā)揮出來了。這意味著,通過使用它,我們可以阻止瀏覽器顯示表達(dá)式執(zhí)行的結(jié)果。
我們?cè)谧柚筧標(biāo)簽的默認(rèn)行為時(shí)候就使用到void
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 這個(gè)鏈接點(diǎn)擊之后不會(huì)做任何事情,如果去掉 void(), 點(diǎn)擊之后整個(gè)頁面會(huì)被替換成一個(gè)字符 0。 </a>
立即調(diào)用的函數(shù)表達(dá)式
在使用立即執(zhí)行的函數(shù)表達(dá)式時(shí),可以使用void運(yùn)算符讓js引擎吧一個(gè)function關(guān)鍵字識(shí)別成函數(shù)表達(dá)式而不是函數(shù)聲明
無
有void:
在一些箭頭函數(shù)中,若此函數(shù)沒有對(duì)應(yīng)的返回值,可能會(huì)造成一些不可預(yù)估的問題,安全起見,對(duì)沒有返回的函數(shù),可以在前面加上void
var fos = () => { return void bar() } fos()
為什么要使用void
void和undefined有什么區(qū)別:
undefined屬于基礎(chǔ)類型且還是全局類型,全局類型還可以被更改、被賦值。
void屬于運(yùn)算符,運(yùn)算符只能被求值計(jì)算,不能被賦值更改。
所以在安全層面上來說 void比undefined更安全。所以在源碼中一般都是使用void xx這種方式來獲取undefined,比直接使用undefined來的更加安全可靠。
如:
export default function isUndefined(input) { return input === void 0; }
JavaScript:void(0) 用法及常見問題解析
javascript:void(0); 是一種在JavaScript和網(wǎng)頁開發(fā)中經(jīng)常使用的技術(shù),尤其在處理鏈接的行為時(shí)。本文將深入探討 javascript:void(0); 的用法,以及在使用過程中可能遇到的常見問題和解決方法。
什么是 javascript:void(0);?
javascript:void(0); 是一個(gè)JavaScript表達(dá)式,用于防止鏈接在被點(diǎn)擊時(shí)執(zhí)行其默認(rèn)行為(即導(dǎo)航到一個(gè)新頁面)。void 是一個(gè)運(yùn)算符,用于執(zhí)行一個(gè)表達(dá)式但不返回任何值。
為什么使用 javascript:void(0);?
在HTML中,<a>
標(biāo)簽通常用于創(chuàng)建鏈接。如果不希望點(diǎn)擊鏈接時(shí)頁面跳轉(zhuǎn)到其他頁面或重新加載當(dāng)前頁面,可以使用 javascript:void(0);。這樣,鏈接會(huì)保持在當(dāng)前頁面,同時(shí)可以通過JavaScript添加其他功能,如觸發(fā)彈窗、開啟模態(tài)框等。
使用示例
以下是一個(gè)簡單的示例,展示如何使用 javascript:void(0); 來防止鏈接默認(rèn)行為:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript:void(0) 示例</title> </head> <body> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="alert('Hello, world!')">點(diǎn)擊我</a> <script> // JavaScript 代碼可以放在這里 </script> </body> </html>
在這個(gè)例子中,點(diǎn)擊鏈接會(huì)彈出一個(gè)對(duì)話框,而不是跳轉(zhuǎn)到另一個(gè)頁面或重新加載當(dāng)前頁面。
常見問題及解決方法
使用 javascript:void(0); 與 # 的區(qū)別
javascript:void(0); 完全阻止鏈接的默認(rèn)行為,而 # 會(huì)改變URL(添加 # 到URL末尾),可能導(dǎo)致頁面滾動(dòng)到頂部。
在實(shí)際應(yīng)用中,推薦使用 javascript:void(0); 來避免這種行為,尤其是在單頁應(yīng)用(SPA)中,這可以防止不必要的滾動(dòng)行為和歷史記錄變動(dòng)。
無法觸發(fā)鏈接的點(diǎn)擊事件
如果發(fā)現(xiàn) javascript:void(0); 阻止了鏈接的點(diǎn)擊事件,確保JavaScript事件處理器正確綁定。在現(xiàn)代JavaScript開發(fā)中,推薦使用事件監(jiān)聽器來代替 onclick 屬性,例如:
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="myLink">點(diǎn)擊我</a> <script> document.getElementById('myLink').addEventListener('click', function() { alert('Hello, world!'); }); </script>
無法通過鍵盤訪問
javascript:void(0); 鏈接可能會(huì)導(dǎo)致無法通過鍵盤訪問,這對(duì)于保持網(wǎng)站的無障礙性是一個(gè)問題。為了改進(jìn)無障礙性,確保鏈接或按鈕可以通過鍵盤(通常是 Tab 鍵和 Enter 鍵)訪問,并適當(dāng)使用 role 和 tabindex 屬性。
結(jié)論
javascript:void(0); 是一個(gè)有用的技巧,可以在不跳轉(zhuǎn)頁面的情況下觸發(fā)鏈接的點(diǎn)擊事件。然而,在使用時(shí)需要注意提高網(wǎng)站的無障礙性,并確保不影響用戶體驗(yàn)。理解 javascript:void(0); 的行為和限制可以幫助開發(fā)者更有效地使用這一技術(shù)。
到此這篇關(guān)于JavaScript void 運(yùn)算符的文章就介紹到這了,更多相關(guān)JavaScript void 運(yùn)算符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 淺談javascript運(yùn)算符——條件,逗號(hào),賦值,()和void運(yùn)算符
- javascript中的void運(yùn)算符語法及使用介紹
- javascript:void(0)用法及常見問題分析
- javascript:void(0)的含義及用法實(shí)例
- 詳解javascript void(0)
- javascriptvoid(0)含義以及與"#"的區(qū)別講解
- javascript:void(0)點(diǎn)擊登錄沒反應(yīng)怎么解決
- javascript:void(0)是什么意思及href=#與href=javascriptvoid(0)的區(qū)別
- 為何JS操作的href都是javascript:void(0);呢
相關(guān)文章
JS支持帶x身份證號(hào)碼驗(yàn)證函數(shù)
身份證號(hào)碼驗(yàn)證-支持新的帶x身份證2008-08-08BootStrapTable服務(wù)器分頁實(shí)例解析
項(xiàng)目中經(jīng)常會(huì)使用到表格,數(shù)據(jù)量大的時(shí)候還需要進(jìn)行分頁,項(xiàng)目設(shè)計(jì)階段,我選擇了bootstrapTable的js插件,個(gè)人覺得這個(gè)框架非常好用,支持服務(wù)器端分頁,此篇主要寫的主要是關(guān)于服務(wù)器分頁,需要的朋友可以參考下2016-12-12詳解用場(chǎng)景去理解函數(shù)柯里化(入門篇)
這篇文章主要介紹了用場(chǎng)景去理解函數(shù)柯里化(入門篇),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04layui 對(duì)table中的數(shù)據(jù)進(jìn)行轉(zhuǎn)義的實(shí)例
今天小編就為大家分享一篇layui 對(duì)table中的數(shù)據(jù)進(jìn)行轉(zhuǎn)義的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09TypeScript?Pinia實(shí)戰(zhàn)分享(Vuex和Pinia對(duì)比梳理總結(jié))
這篇文章主要介紹了TypeScript?Pinia實(shí)戰(zhàn)分享(Vuex和Pinia對(duì)比梳理總結(jié)),今天我們?cè)賮韺?shí)戰(zhàn)下官方推薦的新的vue狀態(tài)管理工具Pini,感興趣的小伙伴可以參考一下2022-06-06