我不打算开始辩论。
如果我们想利用onClick事件，我们应该以某种方式禁用href来触发。 - 这是正确的吗？
如果以上是正确的，我相信javascript:void(0) 具有不触发滚动行为的优势。
这些假设正确吗？
注意：我不打算搜索嵌合体，但我的任务是找到一种方法以跨浏览器的方式设置按钮样式，而不会（完全）可访问性命中，也不会受到黑客攻击和怪癖。
【问题讨论】：
onclick事件。
标签： javascript onclick
如果你想阻止点击链接，你应该在你的点击处理程序中添加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() 会阻止默认操作，如果是链接，默认操作会跟随 URL。
（上面的代码是W3C兼容浏览器的例子，IE有点不同）
【讨论】：
link.onclick，如此处所述：quirksmode.org/js/events_tradmod.html）。高级模型的优点是可以将特定事件的多个事件处理程序分配给一个元素。使用onclick，您只能分配一个处理程序，但这对您来说可能就足够了。只是不要在 HTML 中这样做。
如果你有有一个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">
【讨论】：
我更喜欢 javascript:void(0) 而不是 # 因为它不会通过在地址栏上添加 # 来更改地址栏（这可能会影响任何将来使用/更改 URL 的脚本）。
但比他们两个都好，我更喜欢让 onclick 函数返回 false（因此它根本不导航），然后放置一个 URL，该 URL 将导致与单击相同的操作。例如，假设单击链接会将一些内容加载到“mainArea”div 中。然后 URL 将重新加载整个页面，该 mainArea 填充相同的内容。这样做的好处是，如果他们右键单击 url 并复制地址或在新选项卡中打开，它仍然有效。
<a href="/FullUrl" onclick="return doClick(this);" >Stuff</a>
【讨论】：
如果您想将标记和脚本分开，您还可以考虑使用事件委托来设置事件处理程序。
许多 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>
【讨论】：