Question

我不打算开始辩论。

如果我们想要使用onClick事件，我们应该以某种方式禁用href来触发。 - 这是对的吗？

如果以上是正确的，我相信javascript:void(0)具有不触发滚动行为的优势。

这些假设是否正确？

注意：我不打算搜索一个嵌合体，但我的任务是找到一种以跨浏览器方式设置按钮样式的方法，没有任何可访问性（根本没有），没有黑客攻击和怪癖。

Answer 1

如果您想阻止关注该链接，则应在点击处理程序中添加event.preventDefault()（IE中为event.returnValue = false;）。

您似乎只是在链接的外观之后而不是其功能（或目的）。如果是这样，您可以使用带有CSS的button来相应地设置样式。

应避免与href内容#或javascript:void(0)建立真实链接。

进一步说明：

使用链接只是为了拥有“可点击”的东西并不好。链接具有独特的句法意义。由于您可以为每个元素分配一个click事件处理程序，因此您可以使用任何其他元素。

语法上最正确的一个（imo）将是button，因为您仍然可以使用tab来导航它们。您可以使用CSS为它们设置样式，使它们看起来像链接（see this example)。

现在关于阻止默认操作：

假设您的普通链接具有正确的href值，并且您希望拦截该点击。在您分配给元素的点击处理程序中，例如

link.addEventListener('click', function(event){
    // some code
    event.preventDefault();
}, false);

使用event.preventDefault()可以阻止默认操作，如果是链接，则会阻止默认操作。

（上面的代码是W3C兼容浏览器的示例，IE有点不同）

Answer 2

如果拥有href，请使用javascript:void(0)，因为它与#不同，没有效果。但是你可以根本没有href，给a一个class使它看起来像一个链接，例如：

/* in stylesheet */
a.scriptlink {
    color: blue;
    text-decoration: underline;
    cursor: pointer
}

<!-- in HTML -->
<a class="scriptlink" onclick="whatever">

Answer 3

我更喜欢javascript：void（0）over＃，因为它不会通过在那里放置＃来改变地址栏（这可能会影响使用/更改URL的任何未来脚本）。

但是比两者都好，我更喜欢让onclick函数返回false（所以它根本不导航）然后放一个会导致与点击操作相同的URL。例如，假设单击该链接会将某些内容加载到“mainArea”div中。然后URL将重新加载整个页面，mainArea填充相同的东西。这样做的好处是，如果他们右键单击URL并复制地址或在新标签中打开，它仍然有效。

<a href="/FullUrl" onclick="return doClick(this);" >Stuff</a>

Answer 4

如果要分离标记和脚本，您还可以考虑使用事件委派来设置事件处理程序。

许多Javascript框架（例如jQuery）都带有跨浏览器抽象，以免造成这种麻烦;因为NIH综合症，我翻了my own solution。

完整的示例可能如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Test</title>
  <script type="text/javascript"
   src="http://mercurial.intuxication.org/hg/js-hacks/raw-file/tip/capture.js">
  </script>
  <script type="text/javascript">
// un-hide elements
document.documentElement.className = 'js';

// use event-delegation to capture click-events
capture('click', '.clicky', function(event) {
    alert(this.title);
    return false;
});
  </script>
  <style type="text/css">
/* display element only if scripting is enabled */
.clicky { display: none; }
.js .clicky { display: inline; }
  </style>
 </head>
 <body>
  <!-- link shouldn't be user-accessible; nevertheless, direct user to
   error page -->
  <div>
   <a href="no-js.html" class="clicky" title="clickety-click">click me</a>
  </div>
 </body>
</html>

＃或javascript：void（0）？

4 个答案: