href=”javascript:void(0);


href=”javascript:void(0);”這個的含義是,讓超鏈接去執行一個js函數,而不是去跳轉到一個地址,而void(0)表示一個空的方法,也就是不執行js函數。

為什么要使用href=”javascript:void(0);”

javascript:是偽協議,表示url的內容通過javascript執行。void(0)表示不作任何操作,這樣會防止鏈接跳轉到其他頁面。這么做往往是為了保留鏈接的樣式,但不讓鏈接執行實際操作

<a href="javascript:void(0)" onClick="window.open()"> 點擊鏈接后,頁面不動,只打開鏈接

<a href="#" onclick="javascript:return false;"> 作用一樣,但不同瀏覽器會有差異。

 

 

https://www.cnblogs.com/cyjy/p/6182587.html

------------------------------分割線--------------------------------------

修正一個說法上的bug吧。對於IE6來說,點擊后gif暫停bug僅僅發生在“javascript:偽協議未加分號”的情形下。

<a>標簽增加href屬性,就意味着以下事情:

  • :link選擇器可以選擇到它
  • 這個a標簽可以獲得焦點(可以通過tab按鍵訪問到)
  • 在瀏覽器的默認樣式表中,有href屬性的<a>標簽才有cursor:pointer的效果(尤其是在低版本的IE上)。

綁定了onclick事件的<a>標簽,尤其是它的作用是ajax請求時,基本上我們就用不上這個標簽的默認行為,也連接不到的實際頁面,一般而言也會在CSS里給予了這個元素的cursor等樣式。這時候還要加上href屬性,是為了:

  • <a>夠響應鍵盤事件並獲得焦點(從而屏幕閱讀器能夠讀出背后的內容,增強可訪問性)
  • 優雅降級,在網絡連接很差,還沒有加載到CSS的時候,<a>依然有手型與正常的link樣式。

<a>標簽以href屬性,並不連接到實際的頁面的方案有

  1. <a href="#"></a>
  2. <a href="#nogo"></a>
  3. <a href="##"></a>
  4. <a href="###"></a>
  5. <a href="javascript:void(0);"></a>
  6. <a href="javascript:void(0)"></a>
  7. <a href="javascript:;"></a>
  8. <a href="javascript:"></a>

他們的體驗有細微的差別。

  • 1,點擊這個鏈接后,會讓頁面跳到頭部,window.location.href末尾增加#(若window.location.href末尾沒有#),除非在js里面捕獲onclick事件並阻止默認事件。
  • 2有了初步的語義。但是,如果頁面里面有id為nogo的元素,點擊這個鏈接后,錨點機制會作用,頁面貼齊這個元素上緣。更詳細的,詳見張鑫旭的《URL錨點HTML定位技術機制、應用與問題
  • 3在chrome中不再默認跳轉到頁面頭部,4在IE11中不再跳轉到頁面頭部。見下方測試。
  • 5~8作用相同,但使用了javascript偽協議。在IE6下面,未加分號的方案6和方案8被點擊后,IE6會使得頁面中的gif暫停,並且觸發onbeforeunload事件(詳情參考這里),IE6認作這個頁面有了重定向,並abort之后所有的請求(參考這里)。所以假如你在此之后替換了一個<img>的src,IE6完全不會完成這個新的請求。

我更傾向於使用方案4。

至於語義上LZ這種<a href="javascript:void(0)">使用方式,這個貼里已經有了足夠詳細的回答。我再補充一點,這種情形依然可以做到支持無障礙應用,方法請參考《WAI-ARIA無障礙網頁應用屬性》。


更新,我做了如下的測試:

 <p> <a href="#">#</a> </p> <p> <a href="##">##</a> </p> <p> <a href="###">###</a> </p> <p> <a href="####">####</a> </p> <p> <a href="#####">#####</a> </p> <script type="text/javascript"> var n = 0 ; window.onhashchange = function(){ alert(++n) ; } </script> 
  • 在IE11中,點擊###、####和#####時,頁面不再跳轉到頭部
  • 在chrome中,點擊##、###、####和#####時,頁面不再跳轉到頭部。
  • 但是在IE11和chrome中,點擊所有的<a>都會造成地址欄的修改,並觸發hashchange事件。

所以之前說的“###不會造成地址欄的改變”是錯誤的。

沒有大規模測試其他的瀏覽器,這里做初步猜想:###的意義在於,這是字符數最少的,在所有的瀏覽器中不會導致跳轉到頁面頭部的錨點。

 

壞處:

1、javascript: 是偽協議,是非標准化的協議
2、不能平穩退化,當用戶的瀏覽器對JS失效或禁用時點擊后什么意義都沒有
3、大部分搜索引擎不會搜索到它,因為沒有內容,從而影響排名 (# 是不是也算上空鏈?空鏈對搜索引擎也不友好)


解決方法:

1、將 javascript:、 #、 ### 替換成真實網址,並取消 <a> 的默認點擊事件,return false 或event.preventDefault,如果JS失效了該鏈接雖功能上打了些折扣,但並沒有徹底失效,做到了“平穩退化”

如:本網站側邊欄的“邀請回答”的 http://segmentfault.com/q/1010000000339082# 可以替換成真實地址http://segmentfault.com/q/1010000000339082,然后繼續它之后的事件

2、將不該是按鈕的改成按鈕。好多人都在“爛”用 <a>,每個人都想讓它去完成 <button> 的事情,可看下這篇文章《你不能創造一個按鈕》,講的有些道理

 

 

 

https://www.cnblogs.com/pp-cat/p/4308736.html

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM