href="#" 在页面 url 的末尾附加 #

Question

假设我有以下链接：

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

单击此链接时，将显示一条消息并在页面 URL 的末尾附加一个井号。
这看起来不太漂亮，除了在 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。在某些司法管辖区，可访问性实际上是法律要求。

编辑已修复 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>