如何获取 JQuery.trigger('click');启动鼠标点击

Posted 2023-02-16

【中文标题】如何获取 JQuery.trigger(\'click\');启动鼠标点击

【英文标题】：How to get JQuery.trigger('click'); to initiate a mouse click如何获取 JQuery.trigger('click');启动鼠标点击

【发布时间】：2014-01-22 14:44:34

【问题描述】：

我很难理解如何使用 JQuery 模拟鼠标点击。有人可以告诉我我做错了什么。

html：

<a id="bar" href="http://***.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>

jQuery:

jQuery('#foo').on('click', function()
    jQuery('#bar').trigger('click');
);

演示：FIDDLE

当我点击按钮 #foo 时，我想模拟点击 #bar 但是当我尝试这样做时，什么也没有发生。我也试过jQuery(document).ready(function()...)，但没有成功。

【问题讨论】：

jQuery trigger 仅在添加任何“jQuery click”事件时才有效。否则你将无法通过这种方式做任何事情；

这是浏览器内置的安全措施。请参阅@Blazemonger 的回答：***.com/questions/7999806/…

@san.chez 有趣，感谢您提供的信息，以前不知道此安全措施！

【参考方案1】：

就用这个吧：

$(function() 
 $('#watchButton').trigger('click');
);

【参考方案2】：

你只需要在做.click()之前放一个小的超时事件 像这样：

setTimeout(function() $('#btn').click(), 100);

【讨论】：

如果您尝试在页面加载时模拟点击，则非常适合。

这也解决了我的问题，谢谢。其他解决方案都没有可靠地工作。我的代码显示了一个模式，然后模拟了一个选项卡上的点击。为什么需要延迟？为了安全起见，我不得不使用 500 毫秒。

【参考方案3】：

可能有用：

调用触发器的代码应该在事件被调用之后执行。

例如，我想在#expense_tickets 值更改时执行一些代码，以及在重新加载页面时执行

$(function()  

  $("#expense_tickets").change(function() 
    // code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
  );

  // now we trigger the change event
  $("#expense_tickets").trigger("change");

)

【讨论】：

啊这也是我的问题！对为什么 trigger() 不起作用感到困惑。原来我在它调用的函数之上设置了触发代码——所以钩子实际上并没有到位。哇！

【参考方案4】：

技术上不是这个问题的答案，但可以很好地使用已接受的答案 (https://***.com/a/20928975/82028) 为 jQuery ACF 字段上的选项卡创建下一个和上一个按钮：

$('.next').click(function () 
    $('#primary li.active').next().find('.acf-tab-button')[0].click();
);

$('.prev').click(function () 
    $('#primary li.active').prev().find('.acf-tab-button')[0].click();
);

【参考方案5】：

试试这个对我有用的：

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

【参考方案6】：

我已经尝试了前两个答案，直到我从文件输入元素中删除“display:none”之前它对我不起作用。 然后我恢复到 .trigger() 它也适用于 windows 的 safari。

所以结论，不要使用 display:none;要隐藏您的文件输入，您可以改用 opacity:0。

【参考方案7】：

你需要使用jQuery('#bar')[0].click();to simulate a mouse click on the actual DOM element（不是jQuery对象），而不是使用.trigger() jQuery方法。

注意：DOM 级别 2 .click() 不适用于 some elements in Safari。您将需要使用一种解决方法。

http://api.jquery.com/click/

【讨论】：

使用它来单击 jQuery ACF 字段上的下一个选项卡： $('.next').click(function () $('#primary li.active').next().find ('.acf-tab-button')[0].click(); );

谢谢。它适用于桌面。但在移动设备（android chrome）上却没有。有什么建议吗？

由于某种原因，这会破坏当前 URL 中的哈希值。

如果

这似乎不再起作用（在 Safari、Firefox 上测试）

【参考方案8】：

这是 JQuery 行为。我不知道为什么会这样，它只会触发链接上的 onClick 函数。

试试：

jQuery(document).ready(function() 
    jQuery('#foo').on('click', function() 
        jQuery('#bar')[0].click();
    );
);

【讨论】：

一点也不刺激。 trigger() 旨在执行点击事件 javascript 部分。这与创建多次重复使用的function var() 非常相似。

【参考方案9】：

查看我的演示：http://jsfiddle.net/8AVau/1/

jQuery(document).ready(function()
    jQuery('#foo').on('click', function()
         jQuery('#bar').simulateClick('click');
    );
);

jQuery.fn.simulateClick = function() 
    return this.each(function() 
        if('createEvent' in document) 
            var doc = this.ownerDocument,
                evt = doc.createEvent('MouseEvents');
            evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            this.dispatchEvent(evt);
         else 
            this.click(); // IE Boss!
        
    );

【讨论】：

我会将this.click(); 包裹在else if(this.click) 中

为什么要将字符串'click' 传递给simulateClick 函数？好像没用过。

@clayRay - 是的，我同意你的看法。它是多年前制作的，记住要根据参数进行动态化。但后来我只是试图做出当前需求的解决方案。感谢您的观察。

【参考方案10】：

jQuery 的.trigger('click'); 只会在这个事件上触发一个事件，它也不会触发默认的浏览器动作。

您可以使用以下 JavaScript 模拟相同的功能：

jQuery('#foo').on('click', function()
    var bar = jQuery('#bar');
    var href = bar.attr('href');
    if(bar.attr("target") === "_blank")
    
        window.open(href);
    else
        window.location = href;
    
);

【参考方案11】：

您无法使用 javascript 模拟点击事件。 jQuery .trigger() 函数只会在元素上触发一个名为“click”的事件，您可以使用 .on() jQuery 方法捕获该事件。

【讨论】：

“你不能用javascript模拟点击事件” - Yes you can.

错了……你可以用javascript/jquery模拟点击事件，你可以用.click捕获触发点击事件而不用。