空 javascript 事件的最佳实践（例如 onclick="javascript:;"）[重复]答案

【问题标题】：Best practice for empty javascript event (e.g. onclick="javascript:;") [duplicate]空 javascript 事件的最佳实践（例如 onclick="javascript:;"）[重复]
【发布时间】：2013-04-07 13:35:03
【问题描述】：

如果你想要一个事件或一个空的javascript调用的链接，有几种方法，我能想到的：

<a href="#">Method 1</a>                    <- Ugh... changes URL in browser
<a href="javascript:;">Method 1</a>         <- My currently preferred method
<a href="javascript:void(0);">Method 1</a>  <- Another approach?

就跨浏览器兼容性和简洁性而言，最好的方法是什么？

【问题讨论】：

反问：我认为没有理由在页面上放置一个空链接？
链接应该...链接到某些东西。尽管向链接添加事件侦听器似乎很常见，但如果禁用 JavaScript 后它不会链接到后备页面，那么您应该使用按钮。
只要事件调用preventDefault()或者返回false，href="#"就不会改变浏览器的URL。
有时我必须使用它。例如，我有一个展开容器的可点击 h2。我必须在它周围添加一个a 标记以进行触摸优化。

标签： javascript html

【解决方案1】：

如果不使用链接，请不要使用......好吧，链接到任何东西。

改为使用span，有点像这样：

<span class="spanlink" onclick=something>This is some text</span>

在你的 CSS 中：

.spanlink {
    text-decoration: underline;
    color: blue;
    cursor: pointer; /* Ragnagord's suggestion in comments */
}

【讨论】：

我会将 cursor: pointer; 添加到 css 中。
这根本不是触摸友好的。这就是我在所有可点击的内容上放置链接的主要原因，即使它们没有链接到另一个页面。
@DevilsChild “触摸友好”是什么意思？
当您使用 span 并在触摸输入设备上触摸它时，您的手指会选择部分文本，而使用链接时则不会。此外，IE 10 突出显示了触摸的链接，而不是触摸的跨度。
仅使用键盘无法与 span 进行交互，此解决方案对辅助功能不友好。

【解决方案2】：

使用unobtrusive Javascript。

此外，如果没有 Javascript 的链接无法执行任何操作，那么没有 Javascript 的用户甚至应该看不到该链接。通过 Javascript 添加链接。

【讨论】：

请避免link-only answers。

【解决方案3】：

一个 Jquery 解决方案..

$('a.preventDefault').click(function(){
 return false
});

<a href="#" class="preventDefault">Method 1</a>

【讨论】：

return false 还可以防止冒泡。不是最好的主意。
@AlexeyLebedev 当然，但是将可点击元素放入 <a> 元素中也不是一个好主意

【解决方案4】：

button 怎么样？如果锚没有在任何地方领先，我从不使用锚

【讨论】：