javascript 如何在 Anchot 标签 (<a>) 中同时执行 onClick 和 href
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21704879/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to execute onClick and href both in an Anchot tag (<a>)
提问by user2129794
I have a link as follows:
我有一个链接如下：
<a href="www.google.com" onClick="someFunction()">Click me</a>
On clicking the link, it's executing the JavaScript function but not taking me to the href link.
单击链接时，它会执行 JavaScript 函数，但不会将我带到 href 链接。
Any ideas how to achieve the same?
任何想法如何实现相同的目标？
回答by Esko
I think the easiest way to do it is to make your function return true, so that after the function is complete, the anchor tag will behave like it normally does. This way you can also use the target-attribute if you want to use new window:
我认为最简单的方法是让你的函数返回 true，这样在函数完成后，锚标记的行为就会像往常一样。这样你也可以使用 target-attribute 如果你想使用新窗口：
function myFunction() {
alert("hello");
return true;
}<a href='http://www.google.com' onclick="myFunction();" target="google">Click me</a>回答by BENARD Patrick
I used jQuery, I hope it's still understandable :
我使用了 jQuery，我希望它仍然可以理解：
<a href="www.google.com" onClick=someFunction()>Click me </a>
Its executing the js function but not taking me to the href link.
它执行 js 函数但没有带我到 href 链接。
So ONE way is to add the redirection after your function :
所以一种方法是在你的函数之后添加重定向：
function someFunction()
{
... your code ...
window.location.href( $(this).attr('href') ); // <----- HERE
}
UPDATE AFTER COMMENT :
评论后更新：
function someFunction()
{
... your code ...
window.open( $(this).attr('href') , '_blank' ); // <----- HERE
}
回答by Paulo
You could do this a few ways,
你可以通过几种方式做到这一点
<div onclick = "function();"><a href = "link.com">link here</a> </div>
or you could just use onclick on the a itself
或者你可以在 a 本身上使用 onclick
<a href = "link.com" onclick = "function();"> link here</a>
You're putting the onclick inside of the tags which is just for text, place it in the first to use it as an attribute of the tag.
您将 onclick 放在仅用于文本的标签内，将其放在第一个以将其用作标签的属性。
EDIT: as the user above me posted, in the function return true if you want the href to execute as well.
编辑：正如我上面的用户发布的那样，如果您希望 href 也执行，则在函数中返回 true。
回答by Mazzu
When click event is attached on anchor tag, it is handled by browser in a 'special' way.
当点击事件附加在锚标签上时，浏览器会以一种“特殊”的方式处理它。
The .click is not suppose to work with 'a' tags because the browser does not support "fake clicking" with javascript.
.click 不应该与 'a' 标签一起使用，因为浏览器不支持使用 javascript 的“假点击”。
I mean, you can't "click" an element with javascript. With 'a' tags you can trigger its onClick event but the link won't change colors (to the visited link color, the default is purple in most browsers).
我的意思是，你不能用 javascript“点击”一个元素。使用 'a' 标签，您可以触发其 onClick 事件，但链接不会改变颜色（对于访问过的链接颜色，大多数浏览器中的默认值为紫色）。
So it wouldn't make sense to make the "click" event work with 'a' tags since the act of going to the href attribute is not a part of the onClick event, but hardcoded in the browser.
因此，让“click”事件与 'a' 标签一起工作是没有意义的，因为转到 href 属性的行为不是 onClick 事件的一部分，而是硬编码在浏览器中。
But you can do some customization to onclick handler so as to refer href link.
但是您可以对 onclick 处理程序进行一些自定义以引用 href 链接。
Lets have an example for it :
让我们举一个例子：
$('a').click(function () {
window.open($(this).attr('href'));
});
Here is the http://jsfiddle.net/4Qku8/demonstrating the same using jquery.
这是使用 jquery 演示相同内容的http://jsfiddle.net/4Qku8/。
For further details please refer to this link
有关更多详细信息，请参阅此链接
