当链接被点击时执行JavaScript

Question

假设我们不关心没有启用JavaScript的用户，哪个更好？

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

或者

<a href="javascript:executeSomething()"></a>

有什么区别吗？

除了使用JavaScript库将事件附加到锚元素之外，还有其他我忽略的方法吗？

- JamesBrownIsDead

---

第二个选项是不安全的：https://dev59.com/X3RB5IYBdhLWcg3wNk93#688201 - Shad

Answer 1

onclick的好处是，即使浏览器禁用了javascript，您也可以优雅地处理链接。

例如，下面的照片链接将在浏览器启用或禁用javascript时都能正常工作:

<a href="http://www.example.com/myPhoto.jpg" target="_blank" onclick="showPhoto(this.href); return false;">foobar</a>

- Rob

Answer 2

这基本上是您想要遵循的模式：

• 编写您的HTML标记
• 从JavaScript中附加事件处理程序

以下是一种方法：

<a id="link1" href="#">Something</a>

<script type="text/javascript">
// get a reference to the A element
var link1 = document.getElementById("link1");

// attach event
link1.onclick = function(e) { return myHandler(e); };

// your handler
function myHandler(e) {
    // do whatever

    // prevent execution of the a href
    return false;
}
</script>

其他人已经提到了jQuery，它更加强大且跨浏览器兼容。

- Jeff Meatball Yang

---

运行得非常好。同意在代码中处理这个问题会更好。 - dorien

Answer 3

最好使用onclick，因为这是正确的方法。

javascript:是一种模拟onclick的不成熟方式。

此外，我建议尽可能使用非侵入式的Javascript，这会使代码更易于阅读和维护！

- RageZ

Answer 4

href="#" 有一些不良副作用，比如在浏览器页脚显示 # 作为目标 URL，并且如果用户禁用了 JavaScript，则会在他们单击链接时在其 URL 的末尾添加 #。

我认为最好的方法是在代码中将处理程序附加到链接，而不是在 HTML 中附加。

var e = document.getElementById("#myLink");
e.onclick = executeSomething;

- joshperry

Answer 5

最佳实践是完全将 JavaScript 与您的标记分离。以下是使用 jQuery 的示例。

 <script type="text/javascript">
     $(function() {
         $('a#someLink').click( function() {
              doSomething();
              return false;
         });
     });
 </script>

 ...

 <a href="#" id="someLink">some text</a>

- tvanfosson

---

这篇文章中没有提到jQuery，我认为这可能会让提问者感到困惑...这只是我的个人意见。 - Mike Gleason jr Couturier

不确定为什么这是最佳实践，似乎在搜索.js文件以找出处理所有链接的内容时会导致维护上的噩梦。此外，这需要大量的代码来替换 onclick="myFunc()"。 - Rob

@Mike -- 我只是想要一个快速的JavaScript函数应用示例。显然，任何框架或原始JavaScript都可以使用。 - tvanfosson

@Rob - 使用jQuery的原因是它将你的“代码”放在一起，而不是分散在标记中。是的，这会增加一些代码量，但使用不同的选择器，相同的功能可以应用于许多不同的元素。例如，如果我想对所有链接元素执行特定的函数，我只需要更改选择器，可能还要更改函数以将链接作为参数。当复杂度增加时，这一点变得更加明显。 - tvanfosson

@Rob，对于小项目来说是个好主意，但我也同意tvanfosson的观点。此外，代码片段不一定要在库中。我经常将所有处理程序附加在页面底部，在那里其他变量已经声明并准备好在事件发生时使用...从而将所有JavaScript放在同一个地方！ - Mike Gleason jr Couturier

Answer 6

是的，我同意使用onclick并完全将href从锚标记中删除...不知道你更喜欢哪种方式，但我喜欢在函数内保留'return false'语句。

- AmbrosiaDevelopments

---

上一次我尝试的时候，如果你忽略了href属性，大多数浏览器不会将该元素视为超链接。不确定今天是否仍然如此，因为我已经有一段时间没有再尝试了... - Rob

Answer 7

主要的区别在于：

1. 浏览器默认认为 href 属性是一个字符串（目标 URL）
2. 浏览器知道 onclick 属性中包含一些 JavaScript 代码

这就是为什么有些人会告诉浏览器：“嘿，当你读取这个超链接的 href 属性时，请解释其中的 JavaScript 代码”，方法是使用 <a href="javascript: ... ;">...</a>

回答问题，这就是区别所在！

另外，关于使用 JavaScript 事件的最佳实践是另一个故事，但大部分观点已经在其他地方提到了！

谢谢

- Mike Gleason jr Couturier