我应该使用’#’还是’javascript:void(0);’在我的空链接的href属性上

本文概述

如果你鼓励使用#, 并防止出现默认行为(滚动到文档顶部), 则不可避免地会导致在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阻止默认事件。
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?