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

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

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

或

我见过，但上面说

是一个更好的选择。但是由于某些原因，我不得不使用

链接

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

两者都不好

行为应独立于实际标记进行配置。例如，在jQuery中，您可以执行以下操作

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

在单独的

块中

这样做的好处是

以CSS分离标记和样式的相同方式分离标记和行为

集中配置（这在某种程度上是1的推论）

使用jQuery强大的选择器语法，可以扩展到包含多个参数

此外，它会优雅地降级（但使用

onclick

事件也会降级），因为如果用户没有启用JavaScript，您可以为链接标记提供

href

---

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

第二个选项的一些优点：

您可以在

onclick

中使用

this

来引用锚点本身（在选项1中执行相同操作将为您提供

窗口

）

您可以将

href

设置为不兼容JS的URL，以支持较旧的浏览器（或禁用JS的浏览器）；支持JavaScript的浏览器将执行该函数（要留在页面上，必须从函数内部使用

onclick=“return someFunction（）；”

和

return false

，或

onclick=“return someFunction（）；return false；”

以防止默认操作）

我看到在使用

href=“javascript:someFunction（）”

时发生了奇怪的事情，函数返回一个值；整个页面将被该值替换

陷阱

内联代码：

在

文档

范围内运行，而不是在

窗口

范围内运行的

标记内定义的代码；因此，可以基于元素的

名称

或

id

属性解析符号，从而导致试图将元素视为函数的意外效果

更难重复使用；将其从一个项目移动到另一个项目需要精细的复制粘贴

增加页面的权重，而浏览器可以缓存外部代码文件

---

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

不应使用

onclick

或

javascript:

，而应该听外部脚本的事件，这样可以更好地分离标记和逻辑，从而减少代码重复

还请注意，外部脚本由浏览器缓存

看一看

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

现代浏览器支持或CSP。这是最高级别的web安全性，如果您可以应用它，强烈建议您这样做，因为它会完全阻止所有内容

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

---

最佳实践是使用Javascript订阅活动，如Konrad Rudolph的回答所示。

使用

Javascript:

“协议”是一种代码气味。您可以使用

href=“Javascript:void 0；”

而不是

href=“#”

。。只需确保在函数中

return false

：）@Jack是的，但它会将用户带到页面顶部。@gopi1410如果从函数中返回

false

，则情况会更糟，因为它不像锚一样从键盘工作，所以我建议不要这样做，不管你想使用锚的其他原因是什么。那么

-如果用户禁用了JS并单击了链接，它会将他们带到一个页面，上面说如果没有JS，功能将无法工作？第二点是+1。注意，您也可以说

onclick=“someFunction（）；return false；”“

+1，但也可以看到我的答案。问题中的两个选项都引入了CSP禁用的XSS风险。你这样做的最大好处（从长远来看）是它是安全的，并且可以被CSP锁定。这真是令人伤心。这么多真正的编程挑战。认为自己在做任何事情，但在这里混淆自己的代码是幻想。看看锚标记，看看JavaScript事件，你知道它做什么，结束。将事件附加到其他地方就是…就在其他地方。现在你得四处看看。我认为这个答案不再有效，现在是不正确的。大多数框架在html中为JavaScript代码进行绑定，这与单击时的逻辑相同。@dman True。不管它值多少钱，我认为这是一种倒退，从长远来看，这将是另一种暂时的时尚。但我们拭目以待。堆栈溢出在处理不断变化的最佳实践方面存在问题。我不知道解决这个问题的好方法：如果我改变我的答案，那么我会假装所有这些投票支持一种不同的做法。最好的办法是写一个新的答案，让人们投票表决。

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