JavaScript链接中“href”值的选择：“#”还是“javascript:void(0)”？

技术背景

在网页开发中，当需要创建一个执行 JavaScript 代码的链接时，经常会面临选择 href 属性值的问题，常见的选择是 # 和 javascript:void(0)。然而，这两种选择都有各自的优缺点，并且随着网页开发技术的发展，还有更好的实践方式。

实现步骤

使用“#”的问题及解决方案

问题：
- 团队开发中，使用 # 可能导致开发者忘记在 onclick 中使用 return doSomething()，而仅使用 doSomething()。
- 如果被调用的函数抛出错误，return false; 将不会执行，开发者需要在被调用的函数中适当处理错误。
- # 会将用户带回页面顶部。
解决方案：确保 onclick 总是包含 return false; ，并且被调用的函数不会抛出错误。例如：

1	`<a href="#" onclick="myJsFunc(); return false;">Link</a>`

使用“javascript:void(0)”的优势

避免了使用 # 带来的上述问题。
当 onclick 事件失败时，总是会拦截操作，不会因哈希变化而触发错误的加载调用或其他事件。
示例代码：

1	`<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>`

无干扰 JavaScript 方式

不使用 href 属性，通过 CSS 处理缺失的默认光标样式，使用无干扰的最佳实践来附加 JavaScript 功能。
示例代码：

<! -- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

<! -- language: lang-js -->
// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

<! -- language: lang-css -->
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

使用 `<button>` 元素

对于需要产生数据变化的操作，推荐使用 <button> 元素，并通过脚本绑定事件。
示例代码：

<! -- language: lang-css -->
button.link {
    display: inline-block;
    position: relative;
    background-color: transparent;
    cursor: pointer;
    border: 0;
    padding: 0;
    color: #00f;
    text-decoration: underline;
    font: inherit;
}

<! -- language: lang-html -->
<p>A button that looks like a <button type="button" class="link">link</button>.</p>

核心代码

函数返回值控制链接行为

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

1	`<a href="path/to/some/url" onclick="return !doSomething();">link text</a>`

无干扰 JavaScript 绑定事件

1
2
3

$(function() {
    $(".some-selector").click(myJsFunc);
});

1	`<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>`

最佳实践

优先使用有实际意义的 URL：如果有合适的 URL，应将其作为 href 值，同时在 onclick 中调用 JavaScript 函数，并在函数正常执行时阻止默认行为。
无干扰 JavaScript：避免在 HTML 标记中直接使用 onclick 属性，将 JavaScript 逻辑与 HTML 标记分离，提高代码的可维护性和可扩展性。
使用 <button> 元素：对于非导航目的的操作，特别是需要产生数据变化的操作，使用 <button> 元素代替 <a> 标签。

常见问题

省略 `href` 属性的问题

tab 键导航不可用：省略 a 元素的 href 属性会导致元素无法使用 tab 键导航。可以设置 tabindex 属性或使用 <button> 元素。
IE6 和 IE7 不支持 a:hover 样式：可以添加 JavaScript 垫片来解决这个问题。