本文概述
如果你鼓励使用#, 并防止出现默认行为(滚动到文档顶部), 则不可避免地会导致在onclick事件中使用该函数的return false值, 即:
<a href="#" onclick="return false;">Hey</a>
<!-- Or -->
<a href="#" id="link">Hey</a>
<script>
document.getElementById("link").addEventListener("click", function(){
return false;
}, false);
</script>
而且, 如果你改用javascript:void, 则不必像前面所说的那样在click事件上返回false, void(0)是可能的最小脚本, 其结果为未定义, 即:
<a href="javascript:void(0);">Hey</a>
与使用href =”#”相同的效果, 更小, 更清晰。
javascript:void(0)
使用javascript:时, 在导航中, 已执行脚本的返回值(如果有)将成为浏览器中显示的新文档的内容。 JavaScript中的void运算符使表达式之后的返回值返回undefined, 从而阻止了此操作的发生。
你之所以要使用链接的href这样做是因为, 通常, 一个javascript:URL会将浏览器重定向到评估该JavaScript结果的纯文本版本。但是, 如果结果不确定, 则浏览器将停留在同一页面上。 void(0)只是可能的最小脚本, 其评估结果为未定义。
但是, javascript:void(0);违反了启用CSP的HTTPS上的内容安全策略。内容安全策略(CSP)是安全性的附加层, 有助于检测和缓解某些类型的攻击, 包括跨站点脚本(XSS)和数据注入攻击。这些攻击可用于从数据盗窃到站点损坏或恶意软件分发的所有方面。
因此, 如果你是标准的宗教开发人员, 则可能要使用href =”#”而不是javascript:void来防止违反任何法律。
href =”#”
哈希是最安全的, 以防万一你的用户禁用了Javascript。
你可以使用jQuery轻松解决文档中具有此值的所有链接:
$('a[href="#"]').click(function(e) {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
});
请注意, 你甚至可以直接在元素的onclick属性中直接返回false, 这将具有相同的效果:
<a href="#" onclick="return false;">Hey, i'll do nothing</a>
结论与建议
如果你想要原始, 精确和快速, 请使用javascript:void(0)。
使用href =”#”并阻止javascript的默认事件成为标准关注者。
- 如果你的链接没有指向任何地方, 请不要使用<a>元素。使用<span>或其他合适的方法, 然后添加CSS(:hover)以根据需要设置样式。
- 演示内容不应与内容混在一起。这意味着没有javascript:action, 也没有onclick属性, 而是使用纯Javascript阻止默认事件。