javascript:void(0)的問題使用探討
更新時(shí)間:2014年04月10日 15:25:33 作者:
想做一個鏈接點(diǎn)擊后不做任何事情,方法有很多,不過不利于用戶體驗(yàn),javascript:void(0)可以有效解決這個問題
在做頁面時(shí),如果想做一個鏈接點(diǎn)擊后不做任何事情,或者響應(yīng)點(diǎn)擊而完成其他事情,可以設(shè)置其屬性 href = "#",但是,這樣會有一個問題,就是當(dāng)頁面有滾動條時(shí),點(diǎn)擊后會返回到頁面頂端,用戶體驗(yàn)不好。
目前有如下幾種解決辦法:
1)點(diǎn)擊鏈接后不做任何事情
<a href="javascript:void(0);" >test</a>
<a href="javascript:;" >test</a>
<a href="####" >test</a> //使用2個到4個#,見的大多是"####",也有使用"#all"等其他的
2)點(diǎn)擊鏈接后,響應(yīng)用戶自定義的點(diǎn)擊事件
<a href="javascript:void(0)" onclick="doSomething()">test</a>
<a href="#" onclick="doSomething();return false;">什么問題都解決了,包括瀏覽器不兼容問題</a> //或者直接使用href=""
<a href="#" onclick="alert();event.returnValue=false;">test</a>
說明:
1.javascript:void(0)這種偽協(xié)議,少寫的好,如果你看過一些web標(biāo)準(zhǔn)的書就知道為什么了。(不懂,原話摘的,暫做記錄)
2.鏈接(href)直接使用javascript:void(0)在IE中可能會引起一些問題,比如:造成gif動畫停止播放等,所以,最安全的辦法還是使用“####”。為防止點(diǎn)擊鏈接后跳轉(zhuǎn)到頁首,onclick事件return false即可。
3.如果僅僅是想鼠標(biāo)移過,變成手形,可以使用
<span style="cursor:pointer" onclick="foo()">Click Me!</span>
void是javascript的操作符,意思是:只執(zhí)行表達(dá)式,但沒有返回值,
void 操作符用法格式如下:
javascript:void (expression)
javascript:void expression
為了程序風(fēng)格良好,建議使用第二種帶上括號的
我們可以使用void操作符指定超級鏈接,如javascript:void(document.form.submit())。表達(dá)式會被計(jì)算但是不會在當(dāng)前文檔處裝入任何內(nèi)容,void(0)計(jì)算為0,但在JavaScript上沒有任何效果,也就是說 <a href="javascript:void(0)">的效果同<a href="javascript:void(1)">的效果是一樣的。
關(guān)鍵是只要知道void是javascipt自身的操作符,它表示的是只執(zhí)行表達(dá)式,但沒有返回值!
另外頁面會自動調(diào)回頂端,是因?yàn)?#"默認(rèn)的瞄點(diǎn)位置是top,所以會出現(xiàn)這種情況。
目前有如下幾種解決辦法:
1)點(diǎn)擊鏈接后不做任何事情
復(fù)制代碼 代碼如下:
<a href="javascript:void(0);" >test</a>
<a href="javascript:;" >test</a>
<a href="####" >test</a> //使用2個到4個#,見的大多是"####",也有使用"#all"等其他的
2)點(diǎn)擊鏈接后,響應(yīng)用戶自定義的點(diǎn)擊事件
復(fù)制代碼 代碼如下:
<a href="javascript:void(0)" onclick="doSomething()">test</a>
<a href="#" onclick="doSomething();return false;">什么問題都解決了,包括瀏覽器不兼容問題</a> //或者直接使用href=""
<a href="#" onclick="alert();event.returnValue=false;">test</a>
說明:
1.javascript:void(0)這種偽協(xié)議,少寫的好,如果你看過一些web標(biāo)準(zhǔn)的書就知道為什么了。(不懂,原話摘的,暫做記錄)
2.鏈接(href)直接使用javascript:void(0)在IE中可能會引起一些問題,比如:造成gif動畫停止播放等,所以,最安全的辦法還是使用“####”。為防止點(diǎn)擊鏈接后跳轉(zhuǎn)到頁首,onclick事件return false即可。
3.如果僅僅是想鼠標(biāo)移過,變成手形,可以使用
復(fù)制代碼 代碼如下:
<span style="cursor:pointer" onclick="foo()">Click Me!</span>
void是javascript的操作符,意思是:只執(zhí)行表達(dá)式,但沒有返回值,
void 操作符用法格式如下:
復(fù)制代碼 代碼如下:
javascript:void (expression)
javascript:void expression
為了程序風(fēng)格良好,建議使用第二種帶上括號的
我們可以使用void操作符指定超級鏈接,如javascript:void(document.form.submit())。表達(dá)式會被計(jì)算但是不會在當(dāng)前文檔處裝入任何內(nèi)容,void(0)計(jì)算為0,但在JavaScript上沒有任何效果,也就是說 <a href="javascript:void(0)">的效果同<a href="javascript:void(1)">的效果是一樣的。
關(guān)鍵是只要知道void是javascipt自身的操作符,它表示的是只執(zhí)行表達(dá)式,但沒有返回值!
另外頁面會自動調(diào)回頂端,是因?yàn)?#"默認(rèn)的瞄點(diǎn)位置是top,所以會出現(xiàn)這種情況。
您可能感興趣的文章:
- javascript:void(0)用法及常見問題分析
- javascript:void(0)的含義及用法實(shí)例
- 為何JS操作的href都是javascript:void(0);呢
- js中javascript:void(0) 真正含義
- js中 javascript:void(0) 用法詳解
- javascript:void(0)是什么意思示例介紹
- javascript:void(0)的作用示例介紹
- javascript:void(0)使用探討
- javascript:;與javascript:void(0)使用介紹
- 淺談href=#與href=javascript:void(0)的區(qū)別
- javascript void(0)的妙用
- javascript:void(0)的真正含義實(shí)例分析
- javascript:void(0)用法及常見問題解析
相關(guān)文章
Ionic如何實(shí)現(xiàn)下拉刷新與上拉加載功能
在日常項(xiàng)目開發(fā)中我們經(jīng)常見到下拉刷新上拉加載的功能,接下來通過本文給大家介紹ionic如何實(shí)現(xiàn)下拉刷新與上拉加載的相關(guān)資料,需要的朋友可以參考下2016-06-06js和jQuery以及easyui實(shí)現(xiàn)對下拉框的指定賦值方法
下面小編就為大家分享一篇js和jQuery以及easyui實(shí)現(xiàn)對下拉框的指定賦值方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01layer.alert回調(diào)函數(shù)執(zhí)行關(guān)閉彈窗的實(shí)例
今天小編就為大家分享一篇layer.alert回調(diào)函數(shù)執(zhí)行關(guān)閉彈窗的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09Javascript中從學(xué)習(xí)bind到實(shí)現(xiàn)bind的過程
這篇文章主要介紹了Javascript中從學(xué)習(xí)bind到實(shí)現(xiàn)bind的過程,有興趣的朋友跟著學(xué)習(xí)下吧。2018-01-01javascript DOM編程實(shí)例(智播客學(xué)習(xí))
最近一直在努力學(xué)習(xí)DOM編程這塊,這是目前成就感最強(qiáng)烈的一塊了,畢老師很認(rèn)真的給我們講解了相關(guān)知識,并在網(wǎng)上找了很多做的非常棒的網(wǎng)頁作為例程給我們進(jìn)行講解2009-11-11JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法
json數(shù)據(jù)在ajax實(shí)現(xiàn)異步交互時(shí)起到了很重要的作用,他可以返回請求的數(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-12ES6基礎(chǔ)之展開語法(Spread syntax)
這篇文章主要介紹了ES6基礎(chǔ)之展開語法(Spread syntax),主要介紹了擴(kuò)展語法的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02JavaScript中forEach和map方法的使用與區(qū)別
眾所周知map和forEach是數(shù)組的操作方法,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach和map方法的使用與區(qū)別,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02