如何在href元素上触发点击事件

80

我试图触发jQuery的超链接上的点击事件，如下所示。超链接没有任何ID，但确实具有CSS类

 $(document).ready(function () {  $('.cssbuttongo').trigger('click'); });

上面的功能不起作用。这是超链接

<a href="hyperlinkurl" class="cssbuttongo">hyperlink anchor</a>

— 怪物MMORPG
source

1

由于一个类可以应用于DOM中的多个元素，因此触发它们单击似乎不是一个好主意。

— 伊戈尔·帕拉

1

NomikOS您对此非常正确，但我检查了是否还有其他元素使用此CSS类：）

— MonsterMMORPG，2011年

1

stackoverflow.com/questions/7999806/…–

— 乔什·克罗齐耶

78

我没有事实证据来证明这一点，但是我已经遇到了这个问题。似乎在<a>标签上触发click（）事件的行为似乎与输入按钮所期望的行为不同。

我采用的解决方法是在窗口上设置location.href属性，这将导致浏览器按如下方式加载请求资源：

$(document).ready(function()
{
      var href = $('.cssbuttongo').attr('href');
      window.location.href = href; //causes the browser to refresh and load the requested url
   });
});

编辑：

我会做一个js小提琴，但是问题的本质与jsfiddle如何使用iframe渲染代码混杂在一起，这是不可行的。

— 马修·考克斯（Matthew Cox）
source

这是正确的答案。谢谢:)我还注意到单击href无效。

— MonsterMMORPG，2011年

@MonsterMMorpg请记住，这不会导致浏览器认为这是直接的用户操作。因此，请明智地使用= D

— Matthew Cox

不应该是var href = $（'。cssbuttongo'）。attr（'href'）;

— 露西

7

这忽略了链接也有onclick事件的可能性。只需$('.cssbuttongo')[0].click()正确模拟整个点击即可。

— 罗曼·斯塔科夫

实际上，它仅适用于完整的href。由于我无法在此处放置代码，请阅读我对本文的回答。

— 艾伦·董

208

本机DOM方法做正确的事情：

$('.cssbuttongo')[0].click();
                  ^
              Important!

不管不管href是URL，片段（例如#blah）还是，它都有效javascript:。

请注意，这将调用DOMclick方法而不是jQueryclick方法（这是非常不完整的，并且会完全忽略href）。

— 罗曼·斯塔科夫（Roman Starkov）
source

2

@Timwi，我的意思是说第一个$('.cssbuttongo').click(); // ignores href!不能保证能正常工作。后一种将始终有效，因为使用索引[0]将使jQuery Object变为常规JS Object，这与浏览器使用的完全相同。@Wei Liu

— Alan Dong

1

太棒了！非常直接和说明性的答案。

— caiosm1005

11

这应该是选定的答案。工作完美！

— 阿米特G

3

@AdilMalik之所以起作用，是因为jquery不是唯一具有click（）方法的东西。此代码调用非jquery click（）方法，这是本机DOM。

— 罗曼·斯塔科夫

1

@Timwi我在这里提供jsfiddle：jsfiddle.net/NabiKAZ/3gv90od5

— Nabi KAZ

31

_{除了romkyns的出色答案之外，这里还有一些相关的文档/示例。}

DOM Elements具有本机.click()方法。

该HTMLElement.click()方法模拟在元素上的鼠标单击。

当使用click时，它还会触发元素的click事件，该事件会冒泡到文档树（或事件链）上方的元素，并且也触发其click事件。但是，单击事件冒泡不会导致<a>元素启动导航，就好像收到了真正的鼠标单击一样。 （mdn参考）

有关W3文档。

一些例子..

您可以从jQuery对象访问特定的DOM元素：（示例）
```
  $('a')[0].click();
```
您可以使用该.get()方法从jQuery对象检索DOM元素：（示例）
```
  $('a').get(0).click();
```
如预期的那样，您可以选择DOM元素并调用该.click()方法。（例）
```
  document.querySelector('a').click();
```

这是值得指出的是，jQuery是不是需要触发本地.click()事件。

— 乔什·克罗齐耶（Josh Crozier）
source

4

通过JavaScript触发点击不会打开超链接。这是浏览器中内置的安全措施。

不过，请参见此问题的一些解决方法。

— 开拓者
source

1

我不这么认为。.因为：我发现它像这样工作..在这里

— Cody

3

@CodyDmd仍然是用户触发的点击事件。与OP的原始问题不同。

— Blazemonger，2014年

@CodyDmd看来这[0]对您的小提琴很重要

— 刘炜

3

究竟可以防御什么漏洞？

— 罗曼·斯塔科夫

3

好吧，Blazemonger我不明白你的意思，因为在Firefox，Chrome和IE11中，没有针对下载或SEO点击欺诈的保护措施。换句话说，答案的第一句话和第二句话都是假的。

— 罗曼·斯塔科夫

3

只是想让大家知道，接受的答案并不总是有效。

这是一个例子，它将失败。

如果 <href='/list'>

href = $('css_selector').attr('href')
"/list"
href = document.querySelector('css_selector').href
"http://localhost/list"

或者您可以将从jQuery获得的href附加到此

href = document.URL +$('css_selector').attr('href');

或jQuery方式

href = $('css_selector').prop('href')

最后，调用它来更改浏览器当前页面的URL

window.location.href = href

或使用弹出 window.open(url)

这是JSFiddle中的一个示例。

— 董亚伦
source

因此，您是说如果将其更改为不起作用$('css_selector')[0].click()？它在此JsFiddle中工作...

— Roman Starkov

记录下来，不是我投了赞成票；我认为这里可能有些东西，但我不确定。

— 罗曼·斯塔科夫

@romkyns，当然，它将在您使用[0]从jQuery元素中提取后起作用（它变成纯JS），我的意思是说$('.cssbuttongo').click();将不起作用，因为它仅提供href的任何值，而不是URL的URL。浏览器使用。抱歉，误导性评论。

— 艾伦·董

2

@LinDong：如果您知道那[0].click()行得通，为什么您的答案没有提及？

— Timwi 2014年

location.href接受相对路径，因此使用/list将自动在当前域之前。这样就可以了。

— 蒂姆（Tim）

-1

我面临着类似的问题，如何单击按钮而不是链接。它在.trigger（'click'）或[0] .click（）方法中没有成功，我也不知道为什么。最后，以下内容对我有用：

$('#elementid').mousedown();

— 亨利
source