href="#"会在页面URL末尾添加#。

Question

href="#"会在页面URL末尾添加#。

4

假设我有以下链接：

<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>

- Web_Designer

2个回答

4

这个技巧是在事件处理程序中使用 return false。

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

- bradley.ayers

3

必须给这个链接一个非空的href，因为IE6,7无法识别为空的链接。所以#作为href是可以的，只要在onclick中保持“return false;”就可以了。 - bisko

@bisko 哇.. 真的吗？即使空字符串是一个有效的URI？ - bradley.ayers

3

最好的做法是为href提供一个真实的值，即使JavaScript被禁用或无法工作，也能返回一个页面。 - Bobby Jack

@bradley 是的。IE6、7完全遵循标准，这是个秘密 :) </讽刺> 是的，IE6、7有这个问题。我不确定8及以上版本是否也有。当您不指定href时，A标签的行为就像普通的span标签一样 :) - bisko

@Tom 请查看 http://labs.apache.org/webarch/uri/rfc/rfc3986.html#same-document 和 http://labs.apache.org/webarch/uri/rfc/rfc3986.html#path （如果第一个链接不明确，最后一个链接提供了ABNF）。 - bradley.ayers

我刚在IE6中测试了 href=""，它运行正常，也许你把它和完全省略 href 属性混淆了？（完全省略 href 属性确实会使元素不再成为超链接） - bradley.ayers

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lightness Races in Orbit · Accepted Answer

您需要防止默认响应的发生。

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

最好用一个URI替换那个#，以便于那些不使用JavaScript的人找到正确的页面。在某些司法管辖区，无障碍设计实际上是法律要求。

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