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 替换为适当页面的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;