在标签中调用 javascript 函数的更好方法答案

【问题标题】：Better way to call javascript function in a tag在标签中调用 javascript 函数的更好方法
【发布时间】：2012-06-04 07:02:40
【问题描述】：

以下哪种方式是从a标签调用js函数更好的方式？

<a href="javascript:someFunction()">LINK</a>

或

<a href="#" onclick="someFunction();" return false;">LINK</a>

我见过this question here，但它说<span onclick="someFunction()"> 是更好的选择。但由于某些原因，我不得不使用<a> 链接。

编辑：我正在寻找一个跨浏览器和跨平台的解决方案，它也应该适用于安卓和 iPad。

【问题讨论】：

使用javascript:“协议”是一种代码味道。
您可以使用 href="#" 代替 href="javascript:void 0;" .. 只需确保在您的函数中使用 return false :)
@Jack 是的，但它会将用户带到页面顶部。
@gopi1410 如果您从函数返回 false 则不会
span 选项是 worse 因为它不像锚那样在键盘上工作，所以我建议不要这样做，不管你想要的其他原因是什么使用锚。 <a href="noJS.htm" onclick="someFunction();return false;">LINK</a> 怎么样 - 这样如果用户禁用了 JS 并单击链接，它会将他们带到一个页面，该页面说如果没有 JS，该功能将无法工作？

【解决方案1】：

两者都不好。

行为应该独立于实际标记进行配置。例如，在 jQuery 中你可能会做类似的事情

$('#the-element').click(function () { /* perform action here */ });

在单独的<script> 块中。

这样做的好处是

此外，它会优雅地降级（但使用 onclick 事件也会如此），因为您可以为链接标签提供 href，以防用户未启用 JavaScript。

当然，如果您不使用 jQuery 或其他 JavaScript 库，这些参数仍然很重要（但为什么要这样做呢？）。

【讨论】：

+1，但也请参阅我的回答。问题中的两个选项都引入了 CSP 禁用的 XSS 风险。您这样做的最大优势（从长远来看）是它是安全的并且可以被 CSP 锁定。
这只是悲伤。这么多真正的编程挑战。认为你正在做任何事情而不是在这里混淆你自己的代码是幻想。看锚标签，看JavaScript事件，你就知道它做了什么，结束。将事件附加到其他地方......只是在其他地方。现在你必须四处寻找。
我认为这个答案不再有效，现在不正确。大多数框架在html中对JavaScript代码做一个绑定，这和点击的逻辑是一样的。
@dman 是的。对于它的价值，我认为这是一种倒退，从长远来看将是另一种暂时的时尚。但我们会看到的。 Stack Overflow 在处理不断变化的最佳实践方面存在问题。我不知道解决这个问题的好方法：如果我改变我的答案，那么我会假装所有这些赞成的做法都支持一种与他们所做的不同的做法。最好的方法是创作一个新的答案并让人们投票赞成。

【解决方案2】：

第二种选择的一些优点：

您可以在 onclick 中使用 this 来引用锚点本身（在选项 1 中执行相同操作将为您提供 window）。
您可以将href 设置为不兼容JS 的URL 以支持旧浏览器（或禁用JS 的浏览器）；支持 JavaScript 的浏览器将改为执行该函数（要留在页面上，您必须在函数内部使用 onclick="return someFunction();" 和 return false 或 onclick="return someFunction(); return false;" 以防止默认操作）。
我看到在使用href="javascript:someFunction()" 时会发生奇怪的事情，并且函数会返回一个值；整个页面将被该值替换。

陷阱

内联代码：

在document 范围内运行，而不是在<script> 标签内定义的代码在window 范围内运行；因此，符号可能会根据元素的 name 或 id 属性进行解析，从而导致试图将元素视为函数的意外效果。
更难重复使用；需要精细的复制粘贴才能将其从一个项目移动到另一个项目。
增加页面权重，而外部代码文件可以被浏览器缓存。

【讨论】：

【解决方案3】：

我想说这两种做法都是不好的做法。

应该摒弃onclick 或javascript: 的使用，转而从外部脚本中侦听事件，从而更好地分离标记和逻辑，从而减少重复代码。

另请注意，外部脚本会被浏览器缓存。

一些实现跨浏览器事件监听器的好方法here。

【讨论】：

【解决方案4】：

现代浏览器支持Content Security Policy 或CSP。这是最高级别的网络安全，如果可以应用，强烈推荐，因为它会完全阻止所有XSS attacks。

您的两个建议都因启用 CSP 而中断，因为它们允许内联 Javascript（可能由黑客注入）在您的页面中执行。

最佳做法是在 Javascript 中订阅事件，如 Konrad Rudolph 的回答。

【讨论】：