A標籤使用javascript:僞協議

1、前言

今天，遇到一個別人挖的坑，問題是這樣的。

作了一個列表頁，能夠篩選數據，有不少篩條件。主要是有input複選框和<a>標籤兩種。如圖：

 

 

其中房價的篩選條件使用<a>標籤，代碼以下

1 <a href="javascript:;" name="price">150元-300元</a>

 

用javascript:; 來阻止了a標籤跳轉連接。

可是，卻發如今IE下面點擊a標籤，竟然清除了其餘input複選框的篩選項，what？

第一次碰到這種狀況，而後我仔細研究了一番，發現是僞協議搞的鬼。那麼咱們一塊兒看看這究竟是怎麼回事。 

 

2、什麼是僞協議

僞協議不一樣於因特網上所真實存在的協議，如http://，https://，ftp://，

而是爲關聯應用程序而使用的.如:tencent://(關聯QQ)，data:(用base64編碼來在瀏覽器端輸出二進制文件)，還有就是javascript:

咱們能夠在瀏覽地址欄裏輸入"javascript:alert('JS!');"，點轉到後會發現，其實是把javascript:後面的代碼當JavaScript來執行，並將結果值返回給當前頁面。

 

3、深刻代碼找問題

想了半天實在想不出因此然，而後我返回頁面看這個<a>標籤， 難道是javascript:;這個寫法有問題？

因而我改爲了我經常使用javascript:vioid(0);寫法，可是問題依然沒有解決。真是奇怪。。。

 

心煩意亂，而後打算先跳出這個問題，看了一看javascript:void(0);和javascript:;的區別：

 

其實兩種都是javascript：URL 的形式，在瀏覽器打開javascript：URL的時候，它會先運行URL中的代碼，當返回值不爲undefined的時候，前頁連接會替換爲這段代碼的返回值。

javascript:void(0), 咱們知道void運算符會對給定的表達式進行求值，而後直接返回 undefined，javascript:; 也是返回 undefined，因此兩種方法是等價的。

 

回到問題自己，想一想好奇怪，爲何點擊<a>標籤會取消其餘input複選框的選中呢？

由於是維護別人的代碼，因此忽然想到，會不會是有代碼執行了這個操做，因而我搜索了一下代碼，看哪裏執行了取消input複選框的選中操做。

很快，我就定位到了頁面中onbeforeunload函數中執行了取消input複選框選中的操做，估計寫這段代碼的同窗，是想要在頁面銷燬以前取消input的選中，

避免瀏覽器前進後退複選框仍選中，形成數據不符的問題。

 

到了這一步，問題清晰了一點，那麼只須要測試，是否在IE下，點擊這種寫有javascript:;的a標籤會觸發onbeforeunload。

因而我打開瀏覽器作了測試，果然在ie9及其如下的瀏覽器觸發了這個事件。

 

雖然以前就知道IE中a標籤事件調用順序：onclick->window.onbeforeunload->href ，可是一般頁面中不多會使用onbeforeunload方法，不少時候是忽略的。

 

最後說一下個人解決辦法，

在<a>標籤綁定的click事件中，使用event.preventDefault();取消它的默認行爲，頁面能夠正常運行了。

不知道你們有沒有其餘更好的方法，有的話，還但願你們在留言中告訴我，多多交流。

 

4、聊聊a標籤使用僞協議

問題終於解決了，讓咱們放鬆心情，聊聊<a> 標籤使用javascript:僞協議吧。一般咱們爲<a>標籤增長href屬性，通常有兩個目的：

1. 跳轉到指定的頁面，也就是:link選擇器能夠選擇到它。

2. 有href屬性的<a>標籤纔有cursor：pointer的效果，特別實在低版本瀏覽器裏面。

 

下面咱們主要是聊聊不想要<a>標籤跳轉到實際頁面的幾種方法。

1. <a href="#"></a>

2. <a href="#none"></a>

3. <a href="###"></a>

4. <a href="javascript:"></a>

5. <a href="javascript:;"></a>

6. <a href="javascript:void(0)"></a>

7. <a href="javascript :void(0);"></a>

 

第1種，點擊這個連接後，會讓頁面跳到頁面頂部，在location.href後面增長#號。

第2種，點擊這個連接後， 若是頁面裏面有id爲none的元素，會執行錨點機制跳轉到這個元素上緣。

第3種，不跳轉，能夠阻止默認的跳轉行爲，可是這個在後端代碼中容易識別成註釋，後面的代碼不顯示，以前遇到過這種坑，以後再沒用過。

後面幾種使用了javascript僞協議。咱們上面已經對5和7進行了說明，想詳細瞭解void運算符，可前往https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/void查看。

爲何我要列出4和6呢，有時候有些同窗會忘記寫分號，這樣在IE6下面點擊a標籤，會形成頁面中的gif暫停。

 

 

 

本博客文章皆爲原創，未盡許可，請勿轉載 （http://www.cnblogs.com/song-song/p/5277838.html）