如何在锚标签（<a>）中同时执行onClick和href？

Question

我有一个链接，如下所示：

<a href="www.google.com" onClick="someFunction()">Click me</a>

点击链接时，它会执行JavaScript函数，但不会将我带到href链接。

我该如何实现相同的效果？

- user2129794

---

请分享您的someFunction()，并重新编辑您的问题（onclick在标签之间，应该是属性）。 - BENARD Patrick

你分享的代码中没有任何阻止链接被跟踪的内容。 - Quentin

Answer 1

我认为最简单的方法是让你的函数返回true，这样在函数完成后，锚点标签将像平常一样运行。这样你也可以使用target属性，如果你想要在新窗口中打开链接：

function myFunction() {
  alert("hello");
  return true;
}

<a href='http://www.google.com' onclick="myFunction();" target="google">Click me</a>

- Esko

---

我同意你的观点，这样做更好，但是提问者不想分享他的函数，所以无法确定他是否使用了return false :/ 给你点赞。 - BENARD Patrick

不管函数返回什么，如果需要的话，你总可以将其包装在一个新函数中，该函数返回true :) 无论如何，我仍然认为这是完成他所要求的任务的最佳方法。 - Esko

myFunction 返回什么并不重要，重要的是 onclick 返回什么。它返回 undefined（因为它没有返回语句），所以它不会阻止链接被跟踪。 - Quentin

Answer 2

我使用了jQuery，希望这仍然可以理解：

<a href="www.google.com" onClick=someFunction()>Click me </a>

它正在执行JavaScript函数，但它没有把我带到href链接。

一种方法是在函数后添加重定向：

function someFunction()
{
    ... Your code ...

    window.location.href($(this).attr('href'));   // <-----  HERE
}

评论后更新：

function someFunction()
{
    ... Your code ...

    window.open($(this).attr('href'), '_blank');   // <-----  HERE
}

- BENARD Patrick

---

window.location.href会在新窗口还是新标签页打开链接？我希望它在新标签页中打开。 - user2129794

有时候会在新窗口打开，有时候会在新标签页打开。 - user2129794

Answer 3

你可以以几种方式实现这个：

<div onclick = "function();"><a href = "link.com">link here</a> </div>

或者你可以直接在标签上使用onclick属性。

<a href = "link.com" onclick = "function();"> link here</a>

你把onclick放在标签内部，而它只是用于文本。将其放在第一个标签中，以将其用作标签的属性。

正如Esko发布的，如果你想要href也执行，请在函数中返回true。

- Paulo

Answer 4

当单击事件附加在锚标签上时，浏览器会以“特殊”的方式处理它。

.click 不应该与 'a' 标签一起使用，因为浏览器不支持使用 JavaScript 进行“虚拟点击”。

我的意思是，您无法使用 JavaScript “点击”元素。对于 'a' 标签，您可以触发其 onClick 事件，但链接不会更改颜色（大多数浏览器中默认的已访问链接颜色为紫色）。

因此，使“点击”事件与 'a' 标签一起工作并没有意义，因为转到 href 属性的操作不是 onClick 事件的一部分，而是硬编码在浏览器中。

但是，您可以对 onclick 处理程序进行一些自定义，以便引用 href 链接。

让我们举个例子：

$('a').click(function () {
    window.open($(this).attr('href'));
});

这里是使用jQuery演示相同效果的http://jsfiddle.net/4Qku8/。

如需更多详细信息，请参考Stack Overflow问题我可以调用jQuery的click()方法来跟踪一个链接吗，如果我还没有使用bind或click绑定事件处理程序？。

- Mazzu