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

Question

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

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

OR

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

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

编辑：我正在寻找一个跨浏览器＆amp;跨平台解决方案，应该在机器人＆amp; iPad也是。

Answer 1

两者都不好。

应该独立于实际标记配置行为。例如，在jQuery中，您可能会执行类似

的操作

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

在单独的<script>区块中。

这样做的好处是它

1. 以与CSS分隔标记和样式相同的方式分隔标记和行为
2. 集中配置（这有点是1的推论）。
3. 使用jQuery强大的选择器语法
，可以轻松扩展包含多个参数

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

当然，如果您没有使用jQuery或其他JavaScript库，这些参数仍然计算（但为什么这样做？）。

Answer 2

第二种选择的一些优点：

1. 您可以使用this内的onclick来引用锚本身（在选项1中执行相同操作会改为使用window）。

2. 您可以将href设置为非JS兼容的URL，以支持旧浏览器（或已禁用JS的浏览器）;支持JavaScript的浏览器将执行该功能（保留在您必须使用的页面onclick="return someFunction();"和return false，或者onclick="return someFunction(); return false;"以防止默认操作。

3. 我看到使用href="javascript:someFunction()"时发生奇怪的事情，函数返回一个值;整个页面将被该值替换。

<强>陷阱

内联代码：

1. 在document范围内运行，而不是在<script>范围内运行的window标记内定义的代码;因此，可以根据元素的name或id属性来解析符号，从而导致尝试将元素视为函数的意外效果。

2. 难以重复使用;需要精细的复制粘贴才能将其从一个项目移动到另一个项目。

3. 为您的网页添加权重，而浏览器可以缓存外部代码文件。

Answer 3

我很想说两者都是不好的做法。

应该忽略onclick或javascript:的使用，以支持从外部脚本中侦听事件，从而更好地区分标记和逻辑，从而减少重复代码。

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

查看this answer。

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

Answer 4

现代浏览器支持Content Security Policy或CSP。这是最高级别的网络安全性，强烈建议您应用它，因为它完全阻止了所有XSS attacks。

你的两条建议都打破了CSP，因为它们允许内联Javascript（可以由黑客注入）在你的页面中执行。

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