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

Question

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

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

要么

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

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

编辑:我正在寻找一个跨浏览器和跨平台的解决方案,它也应该适用于机器人和iPad.

Answer 1

两者都不好.

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

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

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

这样做的好处就是它

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

此外,它会优雅地降级(但使用onclick事件也会如此),因为如果href用户没有启用JavaScript,您可以提供链接标记.

当然,如果您不使用jQuery或其他JavaScript库(但为什么这样做？),这些参数仍然很重要.

Answer 2

第二种选择的一些优点:

1. 您可以使用thisinside 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. 为页面添加权重,而外部代码文件可以由浏览器缓存.