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

下面哪个方法是从标签中调用js函数的更好方法?

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

要么

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

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

编辑:我正在寻找一个跨浏览器和跨平台的解决scheme,这也应该在Android和iPad的工作。

这两个都不好。

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

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

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

这个的好处就是它

  1. 以与CSS分隔标记和样式相同的方式分隔标记和行为
  2. 集中configuration(这是1的必然结果)。
  3. 使用jQuery强大的select器语法可以扩展为包含多个参数

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

当然,如果你不使用jQuery或其他JavaScript库(但为什么这么做?

第二个选项的一些优点:

  1. 你可以在onclick使用this来引用锚点本身(在选项1中做同样的事情会改变你的window )。

  2. 您可以将href设置为一个非JS兼容的URL,以支持旧的浏览器(或禁用了JS的)。 那么支持JavaScript的浏览器就会执行这个函数(留在页面上,你必须使用onclick="return someFunction();"并从函数内部return false或者onclick="return someFunction(); return false;"来防止默认动作)。

  3. 我看到奇怪的东西发生在使用href="javascript:someFunction()" ,函数返回一个值; 整个页面将被replace为该值。

陷阱

内联代码:

  1. document范围内运行,而不是在window范围内运行的<script>标签内定义的代码; 因此,可能会根据元素的nameid属性来parsing符号,从而导致尝试将元素作为函数进行处理的意想不到的效果。

  2. 难以重用; 微妙的复制粘贴需要将其从一个项目移动到另一个。

  3. 为您的页面添加重量,而外部代码文件可以由浏览器caching。

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

使用onclickjavascript:应该被忽视,倾向于从外部脚本听事件,允许更好地分离标记和逻辑,从而导致重复代码less。

还要注意,浏览器会caching外部脚本。

看看这个答案 。

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

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

您的两个build议都会打开CSP,因为它们允许内联Javascript(可能被黑客注入)在您的页面中执行。

最好的做法是在Javascript中订阅事件,就像Konrad Rudolph的回答一样。