如何通过 jquery 模拟锚点点击？答案

【问题标题】：How can I simulate an anchor click via jquery?如何通过 jquery 模拟锚点点击？
【发布时间】：2009-04-21 17:18:12
【问题描述】：

我在通过 jQuery 伪造锚点点击时遇到问题：为什么我第一次点击输入按钮时出现thickbox，第二次或第三次没有出现？

这是我的代码：

<input onclick="$('#thickboxId').click();" type="button" value="Click me" />

<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

当我直接单击链接时它总是有效，但如果我尝试通过输入按钮激活厚框则无效。这是在FF。对于 Chrome，它似乎每次都有效。有什么提示吗？

【问题讨论】：

您在这里遗漏了代码。没有与您向我们展示的锚点的点击事件相关联的代码。那个代码有什么作用？是否涉及其他代码？
@Matt 如果你使用不带参数的 click 方法，它不再被解释为事件绑定，它实际上会 CLICK（就像你用鼠标点击一样）它链接的元素到。在这种情况下，当点击输入元素时，ID为'thickboxId'的元素也应该被点击。
@KyleFarris：click() 事件在 Chrome 或 Safari 上不起作用，除非要单击的元素附加了 onclick 事件，并且仍然只会触发该部分而不导航到值。在上面的例子中，他希望它导航到 A 标签的 href 属性，就像用户点击了链接一样。

标签： jquery html onclick thickbox

【解决方案1】：

对我有用的是：

$('a.mylink')[0].click()

【讨论】：

。捐赠下一部分是一个类名。 # 将用于 id。
如果需要输入，则使用focus 而不是click :)
这也适用于我，但为什么会这样呢？为什么 $('a.mylink')[0].click() 有效但 $('a.mylink').eq(0).click() 无效？
[0] 表示数组的第一个元素 - 选择器在执行时返回 0 个或多个元素。不幸的是，.click() 似乎并不能直接在这里工作，因为似乎其他调用被应用于整个框架中一致的选择器的元素集合。
使用[0]或.get(0)是一样的。这些使用元素的 DOM 版本，而不是 jQuery 版本。本例中的.click()函数不是jQuery点击事件，而是原生的。

【解决方案2】：

尽量避免像这样内联你的 jQuery 调用。在页面顶部放一个脚本标签来绑定click事件：

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

<input id="thickboxButton" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

编辑：

如果您试图模拟用户实际点击链接，那么我认为这是不可能的。一种解决方法是更新按钮的 click 事件以更改 Javascript 中的 window.location：

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        window.location = $('#thickboxId').attr('href');
    });
});
</script>

编辑 2：

现在我意识到Thickbox 是一个自定义的jQuery UI 小部件，我找到了here 的说明：

说明：

创建链接元素 (<a href>)
给链接一个值为thickbox (class="thickbox")的类属性
在链接的href 属性中添加以下锚点：#TB_inline
在#TB_inline 之后的href 属性中，将以下查询字符串添加到锚点：

?height=300&width=300&inlineId=myOnPageContent
相应地更改查询中的 height、width 和 inlineId 的值（inlineID 是包含您希望在厚框中显示的内容的元素的 ID 值。
您可以选择将 modal=true 添加到查询字符串（例如 #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true），以便关闭厚框需要从厚框内调用 tb_remove() 函数。请参阅隐藏的模态内容示例，您必须单击“是”或“否”才能关闭厚框。

【讨论】：

点击处理程序中的window.location 不起作用，因为thickbox 无法按预期工作。
在第二个示例中，建议使用.prop() 而不是attr() 来获取解析的url。
我很惊讶这是公认的答案。点击触发器仅适用于原生 DOM 元素，不适用于 jQuery 包装器元素。 @Stevanicus 和 cmets 以及其他几个 SO 帖子对此进行了讨论。答案应该改为 Stevanicus 的答案。
@Schollii - 随意将其编辑为您想要的正确性。
我的意思是接受的答案应该是@stevanicus的答案

【解决方案3】：

我最近发现了如何通过 jQuery 触发鼠标点击事件。

    <script type="text/javascript">
    var a = $('.path > .to > .element > a')[0];
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    a.dispatchEvent(e);
    </script>

【讨论】：

我认为这在 IE 中不起作用，至少在 7 或 8 中不起作用，因为文档上似乎没有 createEvent 方法。
正如 eagle 所说，这适用于 webkit 浏览器。但请注意，您在这里并没有真正使用 jQuery（除了 $ 选择）
这缺少了一半的魔力：stackoverflow.com/questions/1421584/…

【解决方案4】：

这种方法适用于 firefox、chrome 和 IE。希望它可以帮助某人：

var comp = document.getElementById('yourCompId');
try { //in firefox
    comp.click();
    return;
} catch(ex) {}
try { // in chrome
    if(document.createEvent) {
        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );
        comp.dispatchEvent(e);
        return;
    }
} catch(ex) {}
try { // in IE
    if(document.createEventObject) {
         var evObj = document.createEventObject();
         comp.fireEvent("onclick", evObj);
         return;
    }
} catch(ex) {}

【讨论】：

在我看来，由于交叉兼容性，非常有帮助和更好的选择。我不喜欢将所有内容都包装在 try/catch 块中，但我知道这样做是为了对每个浏览器进行级联尝试。

【解决方案5】：

虽然这是一个非常古老的问题，但我发现了一些更容易处理这项任务的方法。它是由 jquery UI 团队开发的 jquery 插件，称为模拟。您可以在 jquery 之后包含它，然后您可以执行类似的操作

<a href="http://stackoverflow.com/"></a>
$('a').simulate('click');

在 chrome、firefox、opera 和 IE10 中运行良好。您可以从 https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js 下载它

【讨论】：

simulate() 的一个关键特性是它发送 jQuery 事件以及触发本机浏览器操作。这是现在正确答案+1
就像一个魅力，当用户点击我的剑道网格中的按钮时，它可以让我在新标签中打开页面。

【解决方案6】：

问题标题为“如何在 jQuery 中模拟锚点点击？”。好吧，您可以使用“触发器”或“触发器处理程序”方法，如下所示：

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/thickbox.js"></script>
<script type="text/javascript">
$(function() {
    $('#btn').click(function() {
        $('#thickboxId').triggerHandler('click');
    })
})
</script>
...
<input id="btn" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

未经测试，这个实际的脚本，但我之前使用过trigger 等，他们工作得很好。

更新
triggerHandler 实际上并没有做 OP 想要的。我认为1421968 提供了这个问题的最佳答案。

【讨论】：

【解决方案7】：

我建议查看 Selenium API 以了解它们如何以与浏览器兼容的方式触发对元素的点击：

selenium-browserbot.js

查找BrowserBot.prototype.triggerMouseEvent 函数。

【讨论】：

【解决方案8】：

我相信你可以使用：

$('#yourLink').bind('click', function() {
  //Do something over here
});

$('#yourLink').trigger('click');

这将很容易触发点击功能，而无需实际点击它。

【讨论】：

【解决方案9】：

您需要伪造锚点点击吗？来自thickbox网站：

可以从链接元素、输入元素（通常是按钮）和区域元素（图像映射）调用ThickBox。

如果这是可以接受的，它应该就像将厚盒类放在输入本身一样简单：

<input id="thickboxButton" type="button" class="thickbox" value="Click me">

如果没有，我建议使用 Firebug 并在锚元素的 onclick 方法中放置一个断点，以查看它是否仅在第一次点击时触发。

编辑：

好的，我必须自己尝试一下，对我来说，您的代码几乎可以在 Chrome 和 Firefox 中运行：

<html>
<head>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
<input onclick="$('#thickboxId').click();" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
</body>
</html>

无论我单击输入还是锚元素，都会弹出窗口。如果上面的代码对您有用，我建议您的错误出在其他地方，并且您尝试隔离问题。

另一个可能是我们使用了不同版本的 jquery/thickbox。我正在使用从thickbox 页面获得的内容-jquery 1.3.2 和thickbox 3.1。

【讨论】：

是的，我需要伪造它，是的，点击处理程序本身可以工作。但实际上，我根本没有设置onclick事件并且它有效，但只是第一次。但是，在thickboxId 中处理onclick 也将不起作用。
我的意思是验证每次单击输入元素时都会触发锚元素中的onclick。哦，看看我上面的编辑。

【解决方案10】：

您可以通过 jQuery 或在 HTML 页面代码中使用模仿链接 href 的操作创建表单：

<a id="anchor_link" href="somepath.php">click here</a>.

var link = $('#anchor_link').attr('href');
$('body').append('<form id="new_form" action="'+link+'"></form>');
$('#new_form').submit();

【讨论】：

此方法会导致整个页面重新加载，而不是简单地跳转到锚点。此外，它还添加了“？”到 url，因此页面变为 example.com?#test 而不是 example.com#test。在 Chrome 和 Safari 上测试。
在 FF 中这会很好地工作。在 Webkit 浏览器中，您将获得 Senseful 描述的 url。但这没问题，不是吗？

【解决方案11】：

为了在登陆页面时模拟对锚点的点击，我只是使用 jQuery 为 $(document).ready. 中的 scrollTop 属性设置动画，不需要复杂的触发器，它适用于 IE 6 和所有其他浏览器。

【讨论】：

【解决方案12】：

如果您不需要像我一样使用 JQuery。我在使用.click() 的跨浏览器功能时遇到了问题。所以我使用：

eval(document.getElementById('someid').href)

【讨论】：

又快又脏，但对我有用。在 jQuery 中，这是 eval($("#someid").attr("href"));

【解决方案13】：

在Javascript中你可以这样做

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");

【讨论】：

【解决方案14】：

使用我制作的 Jure 脚本，可以轻松“点击”任意数量的元素。
我刚刚在 1600 多个项目上使用了它的 Google Reader，它运行良好（在 Firefox 中）！

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});

【讨论】：

我认为这在 IE 中不起作用，至少在 7 或 8 中不起作用，因为文档上似乎没有 createEvent 方法。
我认为应该在IE中使用document.createEventObject()代替，但我没有尝试过。
@bfred.it：似乎 IE 中的 createEventObject 更多地用于创建事件对象以传递给处理程序，而不是调度合成事件。 IE 的fireEvent 可能更接近dispatchEvent，但它只会触发侦听器——而不是默认的浏览器操作。但是，在 IE 中，您可以只调用 click 方法。

【解决方案15】：

JQuery('#left').triggerHandler('click'); 在 Firefox 和 IE7 中运行良好。我没有在其他浏览器上测试过。

如果要触发自动用户点击，请执行以下操作：

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);

【讨论】：

【解决方案16】：

这不适用于android原生浏览器点击“隐藏的输入（文件）元素”：

$('a#swaswararedirectlink')[0].click();

但这有效：

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();

【讨论】：

【解决方案17】：

在尝试使用 jQuery UI 微调器在单元测试中模拟“点击”时，我无法获得之前的任何答案。特别是，我试图模拟选择向下箭头的“旋转”。我查看了jQuery UI spinner unit tests，他们使用了以下对我有用的方法：

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();

【讨论】：