38

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

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

或者

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

我在这里看到了这个问题，但它说<span onclick="someFunction()">是一个更好的选择。但由于某些原因，我必须使用<a>链接。

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

4

4 回答 4

34

两者都不好。

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

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

在一个单独的<script>块中。

这样做的好处是它

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

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

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

于 2012-06-04T07:21:45.303 回答
9

第二种选择的一些优点：

  1. 您可以使用thisinsideonclick来引用锚点本身（在选项 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. 增加页面的权重，而外部代码文件可以被浏览器缓存。

于 2012-06-04T07:23:57.233 回答
3

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

应该放弃使用onclickorjavascript:以支持从外部脚本侦听事件，从而更好地分离标记和逻辑，从而减少重复代码。

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

看看这个答案。

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

于 2012-06-04T07:29:04.363 回答
3

现代浏览器支持内容安全策略或 CSP。这是最高级别的网络安全，如果可以应用它，强烈推荐，因为它完全阻止了所有XSS 攻击。

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

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

于 2015-06-05T09:50:47.223 回答