如何触发href元素的点击事件

Posted 2023-02-16

技术标签:

【中文标题】如何触发href元素的点击事件【英文标题】：How to trigger click event on href element 【发布时间】：2011-12-21 10:30:18 【问题描述】：

我正在尝试使用 jQuery 触发超链接上的点击事件，如下所示。超链接没有任何 id 但它有 css 类：

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

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

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

【问题讨论】：

由于一个类可以应用于 DOM 中的多个元素，因此触发点击它们似乎不是一个好主意。 NomikOS 你说得很对，但我检查了是否有其他元素使用这个 css 类:) ***.com/questions/7999806/… 【参考方案1】：

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

不过，请参阅 this question 了解一些解决方法。

【讨论】：

我不这么认为.. 因为：我发现它是这样工作的 .. 关注jsfiddle here @CodyDmd 仍然是用户触发的点击事件。与 OP 的原始问题不同。 @CodyDmd 看来[0] 在你的小提琴中很重要这究竟能防止哪些漏洞？好吧，我不明白你的意思，Blazemonger，因为在 Firefox、Chrome 和 IE11 中都没有针对下载或 SEO 点击欺诈的保护。也就是说，你的答案are false的第一句和第二句都一样。【参考方案2】：

我没有事实证据来证明这一点，但我已经遇到了这个问题。似乎在 <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 fiddle，但问题的性质与 jsfiddle 如何使用 iframe 来呈现代码相混合，这让我无法做到。

【讨论】：

这是正确答案。谢谢 :) 我还注意到点击 href 不起作用。 @MonsterMMorpg 请记住，这不会导致浏览器认为这是直接的用户操作。所以明智地使用 =D 不应该是var href = $('.cssbuttongo').attr('href'); 这忽略了链接也有onclick事件的可能性。只需执行$('.cssbuttongo')[0].click() 即可正确模拟整个点击。实际上它只适用于完整的href。由于我无法将代码放在这里，请阅读我对这篇文章的回答。【参考方案3】：

原生 DOM 方法做对了：

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

无论 href 是 URL、片段（例如 #blah）还是 javascript:，这都有效。

请注意，这调用了 DOM click 方法而不是 jQuery 的 click 方法（它非常不完整，完全忽略了 href）。

【讨论】：

@Timwi，我的意思是说第一个 $('.cssbuttongo').click(); // ignores href! 不能保证工作。后一个将始终有效，因为使用 index [0] 将使 jQuery 对象成为常规 JS 对象，这与浏览器使用的完全相同。 @刘伟太棒了！非常直接和说明性的答案。这应该是选择的答案。完美运行！ @AdilMalik 它之所以有效，是因为 jquery 不是唯一具有 click() 方法的东西。这段代码调用了非 jquery 的 click() 方法，它是原生 DOM 的东西。 @Timwi 我在这里提供 jsfiddle：jsfiddle.net/NabiKAZ/3gv90od5【参考方案4】：

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

这是一个失败的例子。

如果<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)弹出它

Here 是 JSFiddle 中的一个示例。

【讨论】：

所以你是说如果你把它改成$('css_selector')[0].click()这行不通？它适用于this JsFiddle... 为了记录，投反对票的不是我；我认为这里可能有一些东西，我还不确定。 @romkyns，当然，在使用 [0] 从 jQuery 元素中提取后它会起作用（它变成纯 JS），我的意思是说 $('.cssbuttongo').click(); 不起作用，因为它只会给出无论 href 的值是什么，而不是浏览器使用的 URL。对于误导性的 cmets，我们深表歉意。 @LinDong：如果您知道 [0].click() 有效，为什么您的回答没有提及？ location.href 接受相对路径，因此使用 /list 将自动添加当前域。所以它确实有效。【参考方案5】：

_{除了romkyns的great answer..这里还有一些相关的文档/例子。}

DOM 元素have a native .click() method.

htmlElement.click() 方法模拟鼠标点击元素。

当使用 click 时，它还会触发元素的 click 事件，该事件将冒泡到文档树（或事件链）更高的元素并触发它们的 click 事件。 但是，冒泡点击事件不会导致<a> 元素启动导航，就像收到真正的鼠标点击一样。 (mdn reference)