在 jQuery/JavaScript 中模拟点击链接

Question

在 jQuery/JavaScript 中模拟点击链接

javascriptjqueryonclick

73

我想使用JavaScript在页面上模拟点击任何链接。如果该链接绑定了“onclick”事件的某些函数（由我无法控制的任何其他JS绑定），则必须调用该函数，否则链接应按正常方式行事并打开一个新页面。

我不确定仅检查“onclick”处理程序的值是否足够。我想构建它，使其适用于任何链接元素。

我无法控制可能被链接的“onclick”事件使用任何JS库（不一定是jQuery）或仅使用JavaScript绑定的任何函数。

编辑：在下面的答案的帮助下，看起来可以检查使用jQuery或使用onclick属性附加的事件处理程序。如何检查使用addEventListener /任何其他JS库附加的事件处理程序，以使其万无一失？

- ankit

1

如何检查使用addEventListener / 任何其他JS库附加的事件处理程序，以使其无懈可击？现在那是一个重复的问题 ;) 请参见https://dev59.com/LXRB5IYBdhLWcg3w-8E9#447106 - Crescent Fresh

尚无解决方案，但是 :) 或许可以尝试另一种方式，通过创建MouseEvent来模拟点击？https://dev59.com/3HM_5IYBdhLWcg3wUxjF - ankit

@Ankit：没错，第二个答案会触发所有已附加的处理程序。你仍然说“否则链接应该以正常方式运行并打开一个新页面”。这样做会导致问题。很抱歉我没有更多时间在这里提供帮助。 - Crescent Fresh

@Crescent，我尝试了上述方法并且它有效（该方法仅适用于Firefox）。dispatchEvent()方法将返回一个布尔值，具体取决于preventDefault()是否被触发。我检查该值并且如果链接的href属性已设置，则查看该链接是否应打开另一页，https://developer.mozilla.org/En/DOM/Element.dispatchEvent - ankit

@Crescent 顺便说一下，你帮了我很多。我想以后会更多地使用StackOverflow，而不是无休止地谷歌搜索 :) - ankit

@Ankit：实际上，该答案包括IE支持的.click()实现，它将您想要做的一切都包装起来（包括导航，如果没有处理程序阻止默认操作）。对于其他浏览器，您实际上必须费尽心思才能做到您想要的。 - Crescent Fresh

7个回答

54

为什么不直接使用传统的JavaScript呢？

$('#element')[0].click()

- weisk

7

通过访问jQuery集合中的第一个元素，您正在获取一个DOM元素，然后调用HTMLElement接口的方法，这实际上是好老的JavaScript。 - weisk

1

啊！我的错。我没有注意到 [0]。但是为什么要这样做呢？jQuery 也支持 .click() 方法，所以只需要 $('#element').click() 就可以了。另一方面，如果你真的非常想用普通的 JavaScript 来实现，那么 document.getElementById('element').click() 就可以了，对吧？ - SNag

我记得曾经不得不这样做，因为在IE中，jQuery的.click或.trigger函数实际上并没有触发事件...所以，你可以利用强大的jQuery选择器来获取DOM元素，然后对其进行任何JavaScript操作。 - weisk

1

非常感谢我的朋友，老旧的JavaScript在全新的JavaScript失败的情况下起作用了:D（如果你想知道是在什么情况下：尝试使用JavaScript触发Facebook的“戳一下”按钮）。 - Seeven

那个 [0] 确实有很大的区别！ :) - cregox

注意：没有jQuery库，这将失败。是的，点击事件在本地元素上，但您仍然在使用jQuery进行查询。我的意思是，如果我们要技术上讲，是的，jQuery是JavaScript，但如果没有jQuery的依赖，这将无法工作，并且不会被视为“vanilla”。 - CTS_AE

38

trigger("click") 代替.click()，因为后者已在jQuery 3.3之后被弃用。

$("#your_item").trigger("click");

使用 .trigger() 方法，您可以模拟许多类型的事件，只需将其作为参数传递即可。

- tanathos

9

很简单！只需使用jQuery的click函数：

$("#theElement").click();

- Rob Grant

1

据我所读，jQuery的click()函数只会触发那些使用jQuery绑定到元素的点击事件的函数，不是吗？无论如何它都不起作用。 - ankit

@Ankit：它也会触发任何内联事件处理程序（即 `onclick="..."），但是除此之外，你是正确的。 - Crescent Fresh

啊，抱歉，这个问题比我想象中的要难！ - Rob Grant

8

试试这个

function submitRequest(buttonId) {
    if (document.getElementById(buttonId) == null
            || document.getElementById(buttonId) == undefined) {
        return;
    }
    if (document.getElementById(buttonId).dispatchEvent) {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById(buttonId).dispatchEvent(e);
    } else {
        document.getElementById(buttonId).click();
    }
}

你可以像这样使用它

submitRequest("target-element-id");

- Yashpal Singla

2

这个很好用。感谢您发布非jQuery版本。 - Brian McGinity

由于某些原因，jQuery的click()方法无法正常工作，但dispatchEvent方法可以。有任何想法是为什么吗？我是通过Chrome扩展程序在ExtJS网站上进行点击操作的。 - Gaurav Pingale

1

首先看一下问题，了解如何查找链接是否分配了 jQuery 处理程序。

接下来使用：

$("a").attr("onclick")

检查是否已分配 JavaScript 事件。

如果上述任何条件为真，则调用 click 方法。否则，获取链接：

$("a").attr("href")

并跟随它。

如果使用addEventListener添加事件处理程序，我不知道该怎么办。如果您负责整个页面源代码，请仅使用jQuery事件处理程序。

- kgiannakakis

真的，但是像 addEventListener 或 attachEvent 这样绑定在“其他我无法控制的 JS”上的事件（正如 OP 所提到的），jQuery 无法知道这些事件：https://dev59.com/LXRB5IYBdhLWcg3w-8E9#447106 - Crescent Fresh

如果我负责页面源代码的话，这将会容易得多。不幸的是，我正在构建一个插件，因此它必须完全无懈可击。 - ankit

0

所有这些可能都不会有所帮助，比如当您使用Rails远程表单按钮来模拟点击时。我尝试将Prototype中的良好事件模拟移植到这里：我的代码片段。我刚刚完成了它，并且对我有效。

- sergeych

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jan Hančič · Accepted Answer

您可以使用click函数来触发所选元素的点击事件。

示例：

$( 'selector for your link' ).click ();

你可以在jQuery的文档中了解各种选择器。

编辑：像下面的评论者所说的那样，这只适用于使用jQuery附加的事件、内联或以“element.onclick”的方式设置的事件。它无法与addEventListener一起使用，如果没有定义事件处理程序，它也不会跟随链接。你可以使用类似以下代码来解决这个问题：

var linkEl = $( 'link selector' );
if ( linkEl.attr ( 'onclick' ) === undefined ) {
    document.location = linkEl.attr ( 'href' );
} else {
    linkEl.click ();
}

不过关于addEventListener我不太清楚。