JavaScript链接中应该使用“href=“#“还是“javascript:void(0)“？
开发现成的Web应用过程中，在不希望用户进行页面导航的情况下通常会创建一种特殊的链接对象。这种链接对象有两种主要实现方式：一种是使用href="#"属性来实现不执行JavaScript代码而保持页面可见性的作用；另一种则是通过设置href="javascript:void(0)"来调用空白页面函数以达到类似效果的目的。本文将深入分析这两种方法的特点及其适用场景，并提出更为有效的解决方案以供参考使用。
为什么使用javascript:void(0)？
避免潜在错误
避免返回值丢失的问题
function doSomething() {
// 一些代码
return false;
}
代码解释避免潜在错误的发生：如果在代码中设置为href="#"以避免未捕捉的错误，则最终的return false;命令将不会执行。同样地，这可能会导致页面向上滚动。
动态绑定事件
在特定情况下, 我们有时会为元素动态地绑定onclick事件. 为了实现这一目标, 我们可以使用href="javascript:void(0)"的方式. 这种方式能够使得无需额外处理返回值即可完成绑定操作.
<a href="javascript:void(0)" onclick="someFunc.call(this)">Link</a>
代码解释就目前而言，javascript:void(0)成功地抑制了所有问题，并且在笔者的经验中未发现任何显著的缺点。
脱离了时代的做法
虽然href="#"和href="javascript:void(0)"过去一直被广泛应用，在过去五年中它们被视为outdated and inefficient practices.
- 妨碍维护性：在标签中不当使用JavaScript代码违反了非侵入式JavaScript的原则,削弱了代码的可维护性和可扩展性.
- 增加冗长代码：采用笨拙的冗长代码几乎失去了实质意义.
- 更好的替代方案：如今提供了一种更为高效且易于维护及扩展的方式来实现相同效果.
使用非侵入式JavaScript
不推荐使用href
尽量不采用href属性，并同时通过无插件式的办法在JavaScript中绑定事件。这种做法有助于将JavaScript逻辑集中于JavaScript文件内而非HTML标记中以提高维护大型JavaScript应用的能力
<a class="cancel-action">Cancel this action</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.cancel-action').click(function(){
alert('Cancel action occurs!');
});
});
</script>
代码解释注意事项
- 未带有
href属性的 元素不能直接实现良好的用户体验：如果希望这些元素可通过tab键访问并呈现链接效果，则可设置tabindex属性或采用button元素，并通过相关CSS样式进行视觉模仿。 - 在某些情况下（如 IE6 和 IE7），当元素不带
href属性时... 为了解决这个问题...
更好的做法：使用<button>元素
建议采用经过优化设计的样式表和CSS来实现按钮元素的样式化。这不仅遵循现代Web开发规范，并且能够有效消除浏览器在交互体验方面的不一致性问题。
<style>
button.link {
display: inline-block;
background-color: transparent;
cursor: pointer;
border: none;
color: #00f;
text-decoration: underline;
font: inherit;
}
</style>
<p>一个看起来像链接的按钮：<button type="button" class="link">Click me</button>.</p>
代码解释这样
document.querySelector('.link').addEventListener('click', function() {
//执行逻辑
});
代码解释总结
那些仅执行JavaScript脚本的一类链接，在某些场景下可能不如其他方式稳定可靠。为了实现更好的效果与稳定性，则建议采用按钮标签（