Javascript 如何在 Firefox 中动态单击 href 链接？预期的方法仅适用于 IE

How can I click an href link dynamically in firefox? Expected approach only works in IE

提问by Maxx

http://jsfiddle.net/HVGre/1/- test link.

http://jsfiddle.net/HVGre/1/- 测试链接。

---

---

I have an html link on my page that I need to be able to click dynamically. This works fine with the .click() function in IE, but fails in firefox. I cannot change the link to a button, so that is not an option, it has to be an href.

我的页面上有一个 html 链接，我需要能够动态单击它。这适用于 IE 中的 .click() 函数，但在 Firefox 中失败。我无法更改指向按钮的链接，因此这不是一个选项，它必须是一个 href。

<a href="javascript:alert('!');" id="myHrefLink">My HREF Link</a>

<script>
   document.getElementById("myHrefLink").click();
</script>

Is there a good workaround for this in firefox? I'm able to use jQuery if that opens any possibilities.

在 Firefox 中有一个很好的解决方法吗？如果有任何可能性，我可以使用 jQuery。

1. I do not intend to assign an event handler to the link, I simply need to click the link dynamically using javascript (without doing so manually with the mouse).

2. I cannot alter the functionality of the original link. It has to remain as it is.

1. 我不打算为链接分配事件处理程序，我只需要使用 javascript 动态单击链接（无需使用鼠标手动执行此操作）。

2. 我无法更改原始链接的功能。它必须保持原样。

---

---

EDIT:

编辑：

It seems that the issue Firefox has with this code is that the link does not have an onclick event and has the code referenced via the href, or otherwise NOT onclick (in the example here the code is on href, in my actual code the href is set to just '#', however the link somehow triggers other actions when clicked, don't ask me how, it's a weird flash integration with the plupload tool).

Firefox 对此代码的问题似乎是该链接没有 onclick 事件并且通过 href 引用了代码，否则不会 onclick（在此处的示例中，代码在 href 上，在我的实际代码中是 href仅设置为“#”，但是链接在单击时会以某种方式触发其他操作，不要问我如何，这是与 plupload 工具的奇怪 Flash 集成）。

<a href="javascript:alert('This works!');">Click me dynamically</a>

VS

VS

<a href="#" onclick="alert('This works!');">Click me dynamically</a>

The second example is solid and works in all browsers when the click() function is triggered, however I need the first of these two to work without changing the link dynamically or otherwise. Any clever ideas?

第二个示例是可靠的，并且在触发 click() 函数时适用于所有浏览器，但是我需要这两个中的第一个在不动态或以其他方式更改链接的情况下工作。有什么聪明的想法吗？

采纳答案by Maxx

The answer is that you cannot dynamically click on the href portion of a link in firefox or chrome at this time.

答案是此时您无法在 Firefox 或 chrome 中动态单击链接的 href 部分。

<a href="javascript:alert('This works!');">This does not work dynamically.</a>

VS

VS

<a href="#" onclick="alert('This works!');">This works dynamically onclick.</a>

It seems that FireFox is only able to fire a click event on an HTML link when an onclick property is present. There are tons of workarounds for this so long as the link can be altered in some way (see most comments in this post), but as far as doing what I originally intended to, that only works in IE, currently.

当存在 onclick 属性时，FireFox 似乎只能在 HTML 链接上触发点击事件。只要可以以某种方式更改链接，就有很多解决方法（请参阅本文中的大多数评论），但就我最初打算做的事情而言，目前仅适用于 IE。

http://jsfiddle.net/HVGre/1/- see failed results here.

http://jsfiddle.net/HVGre/1/- 在此处查看失败的结果。

回答by Boris Zbarsky

The behavior here depends on the exact Firefox version:

此处的行为取决于确切的 Firefox 版本：

1. Firefox 4 and earlier does not have a click()method on anchors at all.
2. Firefox 5 and 6 do have such a method, and the method dispatches an untrusted click event, but they do not allow untrusted events to trigger a link's href.
3. Firefox 7 and later allow untrusted click events to trigger a link.

1. Firefox 4 及更早版本根本没有click()锚点方法。
2. Firefox 5 和 6 确实有这样的方法，并且该方法会调度不受信任的点击事件，但它们不允许不受信任的事件触发链接的 href。
3. Firefox 7 及更高版本允许不受信任的点击事件触发链接。

So your options are to wait until late September when Firefox 7 ships, or if you need to support earlier versions to not use .click()to trigger links. Getting the .hrefof the link and then setting the relevant window's location to that string should work as a workaround.

因此，您的选择是等到 9 月下旬 Firefox 7 发布时，或者如果您需要支持早期版本以不用于.click()触发链接。获取.href链接的 ，然后将相关窗口的位置设置为该字符串应该可以作为一种解决方法。

回答by Nathan

Here is my other answer. This will dynamically remove what is in the href, put "#" in the href, and add an onclick="" with "alert('Link was clicked')" in it.

这是我的另一个答案。这将动态删除href中的内容，将“#”放在href中，并在其中添加一个带有“alert('Link was clicked')”的onclick=""。

Here's the code:

这是代码：

<script type="text/javascript">
$(document).ready(function() {
    $('#myHrefLink').attr({
        href: '#',
        onclick: 'alert("Link was clicked");return false;'
    });
});

function clickLinkDynamically() {
    $('#myHrefLink').trigger('click');
}
</script>

<a href="javascript:alert('!');" id="myHrefLink">My HREF Link</a> 

<br /><br />

<div style="padding:10px;border:2px solid grey;background-color:lightgrey;cursor:pointer;" onclick="clickLinkDynamically();">Click here to dynamically click on the link</div>

You can see it working here: http://jsfiddle.net/JVHEs/

你可以在这里看到它的工作：http: //jsfiddle.net/JVHEs/

I hope this helps.

我希望这有帮助。

回答by Serj Sagan

This should work, even in Firefox. Perhaps the issue is you are calling the .click before the DOM is ready. JQuery has a nice method for this:

这应该有效，即使在 Firefox 中也是如此。也许问题是您在 DOM 准备好之前调用了 .click。JQuery 有一个很好的方法：

$(document).ready(function() {
    $("#myHrefLink").click();
});

In non JQuery your best bet is:

在非 JQuery 中，您最好的选择是：

window.onload = function () {
    document.getElementById("myHrefLink").click();
}

This may not be the issue, but not sure what else it could be...

这可能不是问题，但不确定还可能是什么......

回答by Joseph Marikle

This works most of the time

这在大部分时间都有效

function callClickEvent(element){
    var evt = document.createEvent("HTMLEvents"); 
    evt.initEvent("click", true, true); 
    element.dispatchEvent(evt);
}

callClickEvent(document.getElementById("myElement"));

EDIT:

编辑：

and here's the other one I always loose

这是另一个我总是松的

function callClickEvent2(element){
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
    element.dispatchEvent(evt);
}

callClickEvent2(document.getElementById("myElement"));

my pastebin for this: http://pastebin.com/VMHvjRaR

我的粘贴箱：http: //pastebin.com/VMHvjRaR

回答by Nathan

I think you're going to have to use jQuery, as jQuery is working for me:

我认为您将不得不使用 jQuery，因为 jQuery 正在为我工​​作：

<script type="text/javascript">
function clickLinkDynamically() {
    $('#myHrefLink').click();
}
</script>

<a href="#" onclick="alert('Link was clicked');return false" id="myHrefLink">My HREF Link</a>
<br /><br />
<div style="padding:10px;border:2px solid grey;background-color:lightgrey;cursor:pointer;" onclick="clickLinkDynamically();">Click here to dynamically click on the link</div>

You can see an example in jsFiddle: http://jsfiddle.net/7vCmj/

你可以在 jsFiddle 中看到一个例子：http: //jsfiddle.net/7vCmj/

Maybe it wasn't working because you didn't have type="text/javascript"in?

也许它不起作用是因为你没有type="text/javascript"进去？

I hope this helps.

我希望这有帮助。

回答by Jeff the Bear

Here's another solution that takes all links on the page and converts them to use the click event unobtrusively. Essentially turning

这是另一种解决方案，它获取页面上的所有链接并将它们转换为不显眼地使用点击事件。本质上转动

<a href="javascript:alert('This works!');">Click me dynamically</a>

into

进入

<a href="#" onclick="alert('This works!');">Click me dynamically</a> 

Enjoy:

享受：

$('a[href^="javascript:"][href!="javascript:;"]').each(function () {
    var oldHref = $(this).prop('href').substring(11);
    try {
        $(this).click(new Function('e', oldHref + ';e.preventDefault();')).prop('href', '#');
    }
    catch (err) {}
});

$('#myHrefLink').click();

回答by ShankarSangoli

Try this

尝试这个

$(document).ready(function(){
    $('#myHrefLink').click(function(){
        alert('!');
    });


   //To trigger click dynamically use
   $('#myHrefLink').trigger('click');
}

回答by Gaurav Pandey

Try this instead, add reference to jQuery file first.

试试这个，先添加对 jQuery 文件的引用。

<a href="javascript:void(0);" onclick="alert('!');" id="myHrefLink">My HREF Link</a>

<script>$("#myHrefLink").trigger("click");</script>

回答by Phil

Why don't you just do this? (Unless I am missing something)

你为什么不这样做？（除非我遗漏了什么）

$('#myHrefLink').click(function(){
    alert('!');
});