以下哪种方法是从标签调用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也是。
答案 0 :(得分:33)
两者都不好。
应该独立于实际标记配置行为。例如,在jQuery中,您可能会执行类似
的操作$('#the-element').click(function () { /* perform action here */ });
在单独的<script>
区块中。
这样做的好处是它
此外,它会优雅地降级(但使用onclick
事件也是如此)因为如果用户没有启用JavaScript,您可以使用href
提供链接标记。
当然,如果您没有使用jQuery或其他JavaScript库,这些参数仍然计算(但为什么这样做?)。
答案 1 :(得分:9)
第二种选择的一些优点:
您可以使用this
内的onclick
来引用锚本身(在选项1中执行相同操作会改为使用window
)。
您可以将href
设置为非JS兼容的URL,以支持旧浏览器(或已禁用JS的浏览器);支持JavaScript的浏览器将执行该功能(保留在您必须使用的页面onclick="return someFunction();"
和return false
,或者onclick="return someFunction(); return false;"
以防止默认操作。
我看到使用href="javascript:someFunction()"
时发生奇怪的事情,函数返回一个值;整个页面将被该值替换。
<强>陷阱强>
内联代码:
在document
范围内运行,而不是在<script>
范围内运行的window
标记内定义的代码;因此,可以根据元素的name
或id
属性来解析符号,从而导致尝试将元素视为函数的意外效果。
难以重复使用;需要精细的复制粘贴才能将其从一个项目移动到另一个项目。
为您的网页添加权重,而浏览器可以缓存外部代码文件。
答案 2 :(得分:3)
我很想说两者都是不好的做法。
应该忽略onclick
或javascript:
的使用,以支持从外部脚本中侦听事件,从而更好地区分标记和逻辑,从而减少重复代码。
另请注意,外部脚本会被浏览器缓存。
查看this answer。
实现跨浏览器事件侦听器的一些好方法here。
答案 3 :(得分:3)
现代浏览器支持Content Security Policy或CSP。这是最高级别的网络安全性,强烈建议您应用它,因为它完全阻止了所有XSS attacks。
你的两条建议都打破了CSP,因为它们允许内联Javascript(可以由黑客注入)在你的页面中执行。
最佳做法是在Javascript中订阅活动,如Konrad Rudolph的回答。