有時候我們需要用a標籤去綁定一些Javascript or JQuery事件,不是真的要做為連結之用,但是a標籤又必需設定 href , 這時大部份人就會在href加#號,但其實加#號仍然是連結,等同換了另一頁,網址末端也會加上#號(如:http://www.aaa.com#),這並不是最理想的狀況,我們不希望它做任何動作,以下寫法a標籤緊會執行javascript的事件,除此之外不會有其他動作。我們也可以比較以下兩種寫法的差異。
javascript 寫在行內
<!-- A標籤還是有動作 -->
<a href="#" onclick="alert('hello')">沒有作用</a>
<!-- A標籤不會有任何動作 -->
<a href="javascript:void(0);" onclick="alert('hello')">沒有作用</a>
jQuery解法
html:
<a href="#">沒有作用</a>
jQuery
/**
* VECTOR COOL
* https://vector.cool
*/
$(document).ready(function(e) {
$('a').click(function(e){
e.preventDefault();
});
});