今天碰到項目問題:
背景給的接口去做導出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 進行跳轉;
還有什麼更優化跳轉方法呢,以上方法還有何利弊。