javascript:void(0)的問(wèn)題使用探討
更新時(shí)間：2014年04月10日 15:25:33 作者：
想做一個(gè)鏈接點(diǎn)擊后不做任何事情，方法有很多，不過(guò)不利于用戶體驗(yàn)，javascript:void(0)可以有效解決這個(gè)問(wèn)題
在做頁(yè)面時(shí)，如果想做一個(gè)鏈接點(diǎn)擊后不做任何事情，或者響應(yīng)點(diǎn)擊而完成其他事情，可以設(shè)置其屬性 href = "#"，但是，這樣會(huì)有一個(gè)問(wèn)題，就是當(dāng)頁(yè)面有滾動(dòng)條時(shí)，點(diǎn)擊后會(huì)返回到頁(yè)面頂端，用戶體驗(yàn)不好。
目前有如下幾種解決辦法：
1)點(diǎn)擊鏈接后不做任何事情
<a href="javascript:void(0);" >test</a>
<a href="javascript:;" >test</a>
<a href="####" >test</a> //使用2個(gè)到4個(gè)#，見(jiàn)的大多是"####"，也有使用"#all"等其他的
2)點(diǎn)擊鏈接后，響應(yīng)用戶自定義的點(diǎn)擊事件
<a href="javascript:void(0)" onclick="doSomething()">test</a>
<a href="#" onclick="doSomething();return false;">什么問(wèn)題都解決了,包括瀏覽器不兼容問(wèn)題</a> //或者直接使用href=""
<a href="#" onclick="alert();event.returnValue=false;">test</a>
說(shuō)明：
1.javascript:void(0)這種偽協(xié)議，少寫(xiě)的好，如果你看過(guò)一些web標(biāo)準(zhǔn)的書(shū)就知道為什么了。（不懂，原話摘的，暫做記錄）
2.鏈接（href）直接使用javascript:void(0)在IE中可能會(huì)引起一些問(wèn)題，比如：造成gif動(dòng)畫(huà)停止播放等，所以，最安全的辦法還是使用“####”。為防止點(diǎn)擊鏈接后跳轉(zhuǎn)到頁(yè)首，onclick事件return false即可。
3.如果僅僅是想鼠標(biāo)移過(guò)，變成手形，可以使用
<span style="cursor:pointer" onclick="foo()">Click Me!</span>
void是javascript的操作符，意思是：只執(zhí)行表達(dá)式，但沒(méi)有返回值，
void 操作符用法格式如下：
javascript:void (expression)
javascript:void expression
為了程序風(fēng)格良好，建議使用第二種帶上括號(hào)的
我們可以使用void操作符指定超級(jí)鏈接，如javascript:void(document.form.submit())。表達(dá)式會(huì)被計(jì)算但是不會(huì)在當(dāng)前文檔處裝入任何內(nèi)容，void(0)計(jì)算為0，但在JavaScript上沒(méi)有任何效果，也就是說(shuō) <a href="javascript:void(0)">的效果同<a href="javascript:void(1)">的效果是一樣的。
關(guān)鍵是只要知道void是javascipt自身的操作符，它表示的是只執(zhí)行表達(dá)式，但沒(méi)有返回值！
另外頁(yè)面會(huì)自動(dòng)調(diào)回頂端，是因?yàn)?#"默認(rèn)的瞄點(diǎn)位置是top，所以會(huì)出現(xiàn)這種情況。
目前有如下幾種解決辦法：
1)點(diǎn)擊鏈接后不做任何事情
復(fù)制代碼 代碼如下:
<a href="javascript:void(0);" >test</a>
<a href="javascript:;" >test</a>
<a href="####" >test</a> //使用2個(gè)到4個(gè)#，見(jiàn)的大多是"####"，也有使用"#all"等其他的
2)點(diǎn)擊鏈接后，響應(yīng)用戶自定義的點(diǎn)擊事件
復(fù)制代碼 代碼如下:
<a href="javascript:void(0)" onclick="doSomething()">test</a>
<a href="#" onclick="doSomething();return false;">什么問(wèn)題都解決了,包括瀏覽器不兼容問(wèn)題</a> //或者直接使用href=""
<a href="#" onclick="alert();event.returnValue=false;">test</a>
說(shuō)明：
1.javascript:void(0)這種偽協(xié)議，少寫(xiě)的好，如果你看過(guò)一些web標(biāo)準(zhǔn)的書(shū)就知道為什么了。（不懂，原話摘的，暫做記錄）
2.鏈接（href）直接使用javascript:void(0)在IE中可能會(huì)引起一些問(wèn)題，比如：造成gif動(dòng)畫(huà)停止播放等，所以，最安全的辦法還是使用“####”。為防止點(diǎn)擊鏈接后跳轉(zhuǎn)到頁(yè)首，onclick事件return false即可。
3.如果僅僅是想鼠標(biāo)移過(guò)，變成手形，可以使用
復(fù)制代碼 代碼如下:
<span style="cursor:pointer" onclick="foo()">Click Me!</span>
void是javascript的操作符，意思是：只執(zhí)行表達(dá)式，但沒(méi)有返回值，
void 操作符用法格式如下：
復(fù)制代碼 代碼如下:
javascript:void (expression)
javascript:void expression
為了程序風(fēng)格良好，建議使用第二種帶上括號(hào)的
我們可以使用void操作符指定超級(jí)鏈接，如javascript:void(document.form.submit())。表達(dá)式會(huì)被計(jì)算但是不會(huì)在當(dāng)前文檔處裝入任何內(nèi)容，void(0)計(jì)算為0，但在JavaScript上沒(méi)有任何效果，也就是說(shuō) <a href="javascript:void(0)">的效果同<a href="javascript:void(1)">的效果是一樣的。
關(guān)鍵是只要知道void是javascipt自身的操作符，它表示的是只執(zhí)行表達(dá)式，但沒(méi)有返回值！
另外頁(yè)面會(huì)自動(dòng)調(diào)回頂端，是因?yàn)?#"默認(rèn)的瞄點(diǎn)位置是top，所以會(huì)出現(xiàn)這種情況。
相關(guān)文章
這篇文章主要介紹了JavaScript阻止表單提交方法,通過(guò)代碼示例講解了阻止表單提交需要注意的事項(xiàng)，以及onSubmit和check（）的區(qū)別寫(xiě)法,需要的朋友可以參考下2017-08-08
微信小程序?qū)崿F(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
qrcode生成二維碼微信長(zhǎng)按無(wú)法識(shí)別問(wèn)題的解決
這篇文章主要介紹了qrcode生成二維碼微信長(zhǎng)按無(wú)法識(shí)別問(wèn)題的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JS基于onclick事件實(shí)現(xiàn)單個(gè)按鈕的編輯與保存功能示例
這篇文章主要介紹了JS基于onclick事件實(shí)現(xiàn)單個(gè)按鈕的編輯與保存功能,結(jié)合實(shí)例形式分析了JS實(shí)現(xiàn)onclick響應(yīng)事件的轉(zhuǎn)換相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
layui表格checkbox選擇全選樣式及功能的實(shí)例
下面小編就為大家分享一篇layui表格checkbox選擇全選樣式及功能的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
JS與jQuery實(shí)現(xiàn)子窗口獲取父窗口元素值的方法
這篇文章主要介紹了JS與jQuery實(shí)現(xiàn)子窗口獲取父窗口元素值的方法,涉及javascript與jQuery操作窗口元素的相關(guān)技巧,需要的朋友可以參考下2017-04-04
淺析使用BootStrap TreeView插件實(shí)現(xiàn)靈活配置快遞模板
這篇文章主要介紹了使用bootstrap-treeview插件實(shí)現(xiàn)靈活配置快遞模板的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
js實(shí)現(xiàn)addClass,removeClass,hasClass的函數(shù)代碼
js實(shí)現(xiàn)addClass,removeClass,hasClass的函數(shù)代碼，需要的朋友可以參考下。2011-07-07
JavaScript位置參數(shù)實(shí)現(xiàn)原理及過(guò)程解析
這篇文章主要介紹了JavaScript位置參數(shù)實(shí)現(xiàn)原理及過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
JavaScript之移動(dòng)端H5生成圖片解決方案講解
這篇文章主要介紹了JavaScript之移動(dòng)端H5生成圖片解決方案講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08