天天看點

A标簽阻止跳轉

今天碰到項目問題:

A标簽阻止跳轉

背景給的接口去做導出Excel,現在要加個新的功能就是先判斷一下。購物車裡面是否有下架的商品。

這裡用了A标簽,需要阻止跳轉進行驗證,

總結以下a标簽阻止預設行為的幾種簡單方法,希望可以對有需要的朋友有些幫助,

(1)

<a href="javascript:void(0);" target="_blank" rel="external nofollow" onclick= "myjs( )"> Click Me </a>

<a href="javascript:void(null)" target="_blank" rel="external nofollow" ></a>

onclick方法負責執行js函數,而void是一個操作符,void(0)傳回undefined,位址不發生跳轉。

<a href="javascript:;" target="_blank" rel="external nofollow" > Click Me </a>

和void(0)一樣,都傳回"undefined"

(2)

<a href="#" target="_blank" rel="external nofollow" > Click Me </a>

#是标簽是錨點,用這種方法點選後網頁後會傳回到頁面的最頂端

但是網頁後面又有了“##”“#!”等,盡管解決了傳回頂部的問題但仍存在其他缺陷

(3)事件處理函數的工作機制中,在給某元素添加事件處理函數後,一旦事件發生,相應JavaScript代碼就會執行,所調用的JavaScript代碼的傳回值被傳遞給事件處理函數。當我們給a标簽添加onclick事件處理函數并點選a觸發其後,

如果相應JavaScript代碼傳回true,onclick事件處理函數就會認為這個連結呗點選了,同樣的若傳回false即會認為連結未被點選

<a href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick=" myjs(); return false; "> Click Me </a> <a href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick=" return false; "> Click Me </a>

當點選a标簽時,JavaScript代碼傳回值為false,故此連結預設行為未被觸發。

(4)preventDefault()阻止事件的預設行為但不支援IE,是以在IE中使用returnValue阻止事件預設行為

<a href="http://www.baidu.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  id="test">  Click Me  </a> 
<script type="text/javascript"> 
var test = document.getElementById('test'); 
function stopDefault( e )
{ 
   if ( e && e.preventDefault ) 
      e.preventDefault(); 
     else 
        window.event.returnValue = false;  
} 
test.onclick = function(e) 
{ 
     stopDefault(e); 
} 
</script>
           

之後可以使用 window.location.href 進行跳轉;

還有什麼更優化跳轉方法呢,以上方法還有何利弊。