快捷導(dǎo)航

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)擊鏈接后不做任何事情

復(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)文章

Ionic如何實(shí)現(xiàn)下拉刷新與上拉加載功能
在日常項(xiàng)目開(kāi)發(fā)中我們經(jīng)常見(jiàn)到下拉刷新上拉加載的功能，接下來(lái)通過(guò)本文給大家介紹ionic如何實(shí)現(xiàn)下拉刷新與上拉加載的相關(guān)資料,需要的朋友可以參考下
2016-06-06
JavaScript動(dòng)態(tài)添加列的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)添加列的方法,實(shí)例分析了javascript操作table表單的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
js和jQuery以及easyui實(shí)現(xiàn)對(duì)下拉框的指定賦值方法
下面小編就為大家分享一篇js和jQuery以及easyui實(shí)現(xiàn)對(duì)下拉框的指定賦值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
layer.alert回調(diào)函數(shù)執(zhí)行關(guān)閉彈窗的實(shí)例
今天小編就為大家分享一篇layer.alert回調(diào)函數(shù)執(zhí)行關(guān)閉彈窗的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
Javascript中從學(xué)習(xí)bind到實(shí)現(xiàn)bind的過(guò)程
這篇文章主要介紹了Javascript中從學(xué)習(xí)bind到實(shí)現(xiàn)bind的過(guò)程，有興趣的朋友跟著學(xué)習(xí)下吧。
2018-01-01
JavaScript中常見(jiàn)的Polyfill介紹
在多姿多彩的JavaScript世界,Polyfill如同一座架在瀏覽器兼容性鴻溝之上的橋梁,本文將介紹常見(jiàn)的JavaScript Polyfill兼容方案,并舉例說(shuō)明它們的應(yīng)用,需要的可以參考下
2023-12-12
javascript DOM編程實(shí)例(智播客學(xué)習(xí))
最近一直在努力學(xué)習(xí)DOM編程這塊，這是目前成就感最強(qiáng)烈的一塊了，畢老師很認(rèn)真的給我們講解了相關(guān)知識(shí)，并在網(wǎng)上找了很多做的非常棒的網(wǎng)頁(yè)作為例程給我們進(jìn)行講解
2009-11-11
JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法
json數(shù)據(jù)在ajax實(shí)現(xiàn)異步交互時(shí)起到了很重要的作用，他可以返回請(qǐng)求的數(shù)據(jù)，然后利用客戶端的js進(jìn)行解析，這一點(diǎn)體現(xiàn)出js的強(qiáng)大，本文介紹JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法，需要了解的朋友可以參考下
2012-12-12
ES6基礎(chǔ)之展開(kāi)語(yǔ)法(Spread syntax)
這篇文章主要介紹了ES6基礎(chǔ)之展開(kāi)語(yǔ)法(Spread syntax)，主要介紹了擴(kuò)展語(yǔ)法的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
JavaScript中forEach和map方法的使用與區(qū)別
眾所周知map和forEach是數(shù)組的操作方法,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach和map方法的使用與區(qū)別,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02