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

您必须防止发生默认响应。

老式的方法是从中返回 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>