如何在锚标记 (<a>) 中执行 onClick 和 href答案

【问题标题】：How to execute onClick and href both in an anchor tag (<a>)如何在锚标记 (<a>) 中执行 onClick 和 href
【发布时间】：2014-03-09 10:01:31
【问题描述】：

我有一个链接如下：

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

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

我怎样才能达到同样的效果？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

我同意你的观点，这样更好，但是提问者不想分享他的功能，所以无法确定他是否使用了 return false :/ 为你 +1
函数返回什么并不重要，你总是可以将它包装在一个新函数中，如果需要，它会返回 true :) 无论如何，我仍然认为这是按照他的要求做的最好方法。
myFunction 返回什么都没有关系。重要的是onclick 返回的内容。它返回undefined（因为它没有返回语句）所以它不会阻止链接被跟踪。

【解决方案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
}

【讨论】：

【解决方案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 posted，如果您希望href也执行，则在函数中返回true。

【讨论】：

【解决方案4】：

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

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

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

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

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

让我们举个例子：

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

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

【讨论】：