href =“＃”在頁面末尾添加＃

Question

假設我有以下鏈接：

<a href="#" onclick="alert('You clicked a link.');">Click Me!</a>

單擊此鏈接時，將提醒消息以及在頁面末尾添加井號。
除了在url本身使用javascript之外，有什么方法可以避免它，這看起來不是很漂亮：

<a href="javascript:alert('You clicked a link.');">Click Me!</a>

Answer 1

您必須阻止發生默認響應。

老式的方法是從它return false ：

<a href="#" onclick="alert('You clicked a link.'); return false;">Click Me!</a>

或更好：

<a href="#" id="myLink">Click Me!</a>

<script type="text/javascript">
window.onload = function() {
   document.getElementById('myLink').onclick = function(event) {
      alert('You clicked a link.');
      return false;
   };
};
</script>

現在最好的方法是調用event屬性的正確方法：

<a href="#" id="myLink">Click Me!</a>

<script type="text/javascript">
window.onload = function() {
   document.getElementById('myLink').onclick = function(event) {
      alert('You clicked a link.');
      event.preventDefault(); // <---
   };
};
</script>

對於不使用JavaScript的人來說，最好將#替換為某個正確頁面的URI。 在某些司法管轄區，可訪問性實際上是法律要求 。

編輯固定為bleedin'IE：

function f() {
   document.getElementById('myLink').onclick = function(e) {
      alert('You clicked a link.');

    if (!e) {
       var e = window.event;
    }

    // e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue  = false;

    // e.stopPropagation works only in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
};

window.onload = f;

Answer 2

技巧是在事件處理程序上return false 。

<a href="" onclick="alert('You clicked a link.'); return false">Click Me!</a>