有時候我們需要用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(); }); });