使用 jQuery .click() （或类似的）在 href 属性中触发 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6927215/
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
Trigger javascript in href attribute with jQuery .click() (or similar)
提问by Ben Hull
Unfortunately, I'm working with some 3rd party javascript, which inserts links into my pages. Rather than just use these links as is, I want to use proxy elements, which, when clicked, trigger the click event on the 3rd party links.
不幸的是，我正在使用一些 3rd 方 javascript，它将链接插入到我的页面中。我想使用代理元素，而不是按原样使用这些链接，当点击这些元素时，会触发第 3 方链接上的点击事件。
The 3rd party links pack javascript into the href attribute, like this:
第 3 方链接将 javascript 打包到 href 属性中，如下所示：
<a id="horribleLink" href="javascript:doSomething()">Click me</a>
My proxy element looks like this:
我的代理元素如下所示：
<button rel="horribleLink" class="linkProxy">No, click me</button>
And a bit of jQuery'd javascript to link them together:
和一些 jQuery'd javascript 将它们链接在一起：
$('button.linkProxy').click(function(){
$('#' + $(this).attr('rel')).click();
});
Now, this works perfectly if the 3rd party link is just a standard link (a slightly less horrible onclick (<a id="horribleLink" href="http://www.google.com">Click</a>), or<a href="#" id="horribleLink" onclick="doSomething()">Click</a>), but when the javascript is inside the href attribute, triggering 'click' does nothing at all.
现在，如果第 3 方链接只是一个标准链接 ( 稍微不那么可怕的 onclick ( <a id="horribleLink" href="http://www.google.com">Click</a>) 或<a href="#" id="horribleLink" onclick="doSomething()">Click</a>)，这将非常有效，但是当 javascript 位于 href 属性内时，触发“click”根本不起作用。
Can anyone tell me why, and if there's a reasonable workaround?
谁能告诉我为什么，以及是否有合理的解决方法？
UpdatedAs Millimetric said, the root cause looks to be that browsers prevent 'faking clicks' on anchors - I've removed my 'standard link' example, as that's another situation that doesn't work. The onclick handler does work, though, as you'd expect.
更新正如 Millimetric 所说，根本原因似乎是浏览器阻止了对锚点的“伪造点击”——我已经删除了我的“标准链接”示例，因为这是另一种不起作用的情况。不过，正如您所期望的，onclick 处理程序确实可以工作。
采纳答案by Milimetric
The accepted answer here goes into a little depth as to "why this is happening": Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?. Basically, it seems you can't do a click() on a link because the browser doesn't support fake clicking.
这里接受的答案对“为什么会发生这种情况”有一点深入：如果我还没有使用 bind 或 click 将事件处理程序绑定到它，我可以调用 jquery click() 来跟随 <a> 链接吗？. 基本上，您似乎无法对链接执行 click() 操作，因为浏览器不支持虚假点击。
One Work-around:
一种解决方法：
If you set location.href for those cases, it works:
如果您为这些情况设置 location.href，它会起作用：
$('button.linkProxy').click(function(){
location.href = $('#' + $(this).attr('rel')).attr('href');
});
Working fiddle: http://jsfiddle.net/uv29x/3/
工作小提琴：http: //jsfiddle.net/uv29x/3/
Two Work-around:
两种解决方法：
You could just get the href of those links and do an eval()on them, right?
您可以获取这些链接的 href 并eval()对其进行操作，对吗？
回答by Rocket Hazmat
Set window.locationto the hrefvalue.
设置window.location为href值。
$('button.linkProxy').click(function(){
window.location = $('#'+$(this).attr('rel')).attr('href');
});
回答by ipr101
I'd just finished typing this up when I saw Milimetric's answer . Here's the code anyway for what it's worth -
当我看到 Milimetric's answer 时，我刚刚完成输入。无论如何，这是值得的代码 -
eval($('#horribleLink').attr('href').replace('javascript:',''));
回答by Nathan J.B.
Use the native Javascript clickmethod and you've got yourself a working click!
使用本机 Javascriptclick方法，您就可以轻松点击！
$('button.linkProxy').click(function(){
$('#' + $(this).attr('rel')).click()[0].click();
});
I kept the jQuery clickassumingthat Javascript clickwill bypass jQuery triggers in which case you'll want to keep both. Otherwise, if I'm wrong (or you don't need to account for trigger) you can reduce it to:
我保留 jQueryclick假设Javascriptclick将绕过 jQuery triggers，在这种情况下，您需要同时保留两者。否则，如果我错了（或者您不需要考虑trigger），您可以将其简化为：
$('button.linkProxy').click(function(){
$('#' + $(this).attr('rel'))[0].click();
});
回答by Icarus
If I understand correctly the question, the issue is that you have something like this:
如果我正确理解这个问题，问题是你有这样的事情：
<a href="javascript:alert('hello');" onclick="javascript:alert('clicked');">Test</a>
And you claim that when the javascript is on the href, the onclick event is not fired. Correct? If so, what I am seeing is that both get fired, first onclick and then the javascript inside href.
并且您声称当 javascript 位于 href 上时，不会触发 onclick 事件。正确的？如果是这样，我所看到的是两者都被解雇了，首先是 onclick，然后是 href 中的 javascript。
