如何在锚标记 ( <a>) 中</a>同时执行 onClick 和 href

Question

我有一个链接如下：

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

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

我怎样才能达到同样的目标？

Answer 1

我认为最简单的方法是让你的函数返回 true，这样在函数完成后，锚标记的行为就会像往常一样。 这样，如果您想使用新窗口，也可以使用 target-attribute：

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

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

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
}

Answer 3

你可以通过几种方式做到这一点

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

或者你可以在a本身上使用 onclick

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

您将 onclick 放在仅用于文本的标签内。 将其放在第一个以将其用作标签的属性。

正如Esko 发布的那样，如果您还希望 href 也执行，则在函数中返回 true。

Answer 4

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

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

我的意思是，你不能用 JavaScript“点击”一个元素。 使用 'a' 标签可以触发它的 onClick 事件，但链接不会改变颜色（对于访问过的链接颜色，大多数浏览器中的默认值为紫色）。

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

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

让我们举一个例子：

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

这是使用 jQuery 演示相同内容的http://jsfiddle.net/4Qku8/ 。