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

时间:2012-06-04 07:02:40

标签: javascript html

以下哪种方法是从标签调用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也是。

4 个答案:

答案 0 :(得分:33)

两者都不好。

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

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

在单独的<script>区块中。

这样做的好处是它

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

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

    当然,如果您没有使用jQuery或其他JavaScript库,这些参数仍然计算(但为什么这样做?)。

答案 1 :(得分:9)

第二种选择的一些优点:

  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()"时发生奇怪的事情,函数返回一个值;整个页面将被该值替换。

  4. <强>陷阱

    内联代码:

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

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

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

答案 2 :(得分:3)

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

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

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

查看this answer

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

答案 3 :(得分:3)

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

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

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