jQuery注入click() [英] JQuery injecting click()

问题描述

我当前正在构建一个将javascript/jquery注入某些页面的浏览器扩展，并且我遇到一个奇怪的问题，在我注入的代码中强制.click()事件不起作用.奇怪的是，如果我从控制台js控制台拨打电话，它会完全正常工作.

I am currently building a browser extension that injects javascript/jquery into certain pages, and i am having a weird issue, where forcing .click() events are not working from my injected code. The strange bit is that it works completely fine if i make the call from my console js console.

我真的不明白问题是什么.看来我所有其他电话都工作正常.我可以使用.click(function(){...})绑定到click事件(显然我的jquery已正确加载)，并在单击事物时调用方法(因此显然我的jquery已正确加载)，但是我尝试强制点击，呼叫只是打不通.

I dont really understand what the problem is. It seems that all of my other calls are working fine. I can bind to click events using .click(function(){...}) (so clearly my jquery has been loaded properly), and call methods when things are clicked (so clearly my jquery has been loaded properly), but the second that i try to force a click, the call just does not go through.

任何人都可以解释正在发生的事情或我可以解决的方法吗?

Can anybody explain what is happening, or a way that i can get around it?

(我无法重现此问题，因为该问题显然与将js注入扩展名有关)

(i can not recreate this issue, because the problem clearly has to do with injecting the js in an extension)

这是我可以做的最好的娱乐活动

this is the best i can do for recreation:

//I have tried all of these separately 
console.log($("#this_is_an_id"))  //This returns the correct element

$("#this_is_an_id").click()       //This does not work at all

$("#this_is_an_id").trigger("click") //I have also tried this without success

$("#this_is_an_id").click(function(){ console.log("stuff") }) //This works fine.

真的，在这一点上，我认为这不是我的错，而是浏览器的注入脚本方法出了点问题.我正在寻找一种真正的hackey方式来解决此问题，我也尝试了eval('$("#this_is_an_id").trigger("click")').还有其他建议吗?

Really, at this point, i am assuming it is not my fault, but something that is wrong with the browser's method of injecting script. I am sorta looking for really hackey ways to fix this, i also tried eval('$("#this_is_an_id").trigger("click")'). Does anybody have any other suggestions?

推荐答案

我终于在这里找到了一个非常好的答案/解决此问题的方法: 从Firefox浏览器扩展程序触发事件?

I finally found a very excellent answer/work around to this issue here: Trigger events from Firefox browser extension?

来自用户 cms :

首先，对于单击事件，您需要创建一个类型为MouseEvents而不是HTMLEvents的事件对象，并使用event.initMouseEvent代替event.initEvent.

First of all, for click events, you need to create an event object with type MouseEvents, not HTMLEvents, and use event.initMouseEvent instead of event.initEvent.

要从XUL叠加层访问Firefox当前选项卡的文档，可以使用content.document属性，但是由于已经可以访问要单击的DOM元素，因此可以使用Node.ownerDocument属性. ，它将引用此节点的顶级文档对象.

To access the document of the current tab of Firefox from a XUL overlay, you can use the content.document property, but since you already have access to the DOM element you want to click, you can use the Node.ownerDocument property, which will refer to the top-level document object for this node.

我做了一个简单的函数来模拟MouseEvent:

I have made a simple function to simulate MouseEvents:

function triggerMouseEvent(element, eventName, userOptions) {
  var options = { // defaults
    clientX: 0, clientY: 0, button: 0,
    ctrlKey: false, altKey: false, shiftKey: false,
    metaKey: false, bubbles: true, cancelable: true
     // create event object:
  }, event = element.ownerDocument.createEvent("MouseEvents");

  if (!/^(?:click|mouse(?:down|up|over|move|out))$/.test(eventName)) {
    throw new Error("Only MouseEvents supported");
  }

  if (typeof userOptions != 'undefined'){ // set the userOptions
    for (var prop in userOptions) {
      if (userOptions.hasOwnProperty(prop))
        options[prop] = userOptions[prop];
    }
  }
  // initialize the event object
  event.initMouseEvent(eventName, options.bubbles, options.cancelable,
                       element.ownerDocument.defaultView,  options.button,
                       options.clientX, options.clientY, options.clientX,
                       options.clientY, options.ctrlKey, options.altKey,
                       options.shiftKey, options.metaKey, options.button,
                       element);
  // dispatch!
  element.dispatchEvent(event);
}

用法: triggerMouseEvent(element，'click');

Usage: triggerMouseEvent(element, 'click');

在此处检查测试用法.

如果要更改事件对象属性的值，还可以将对象作为第三个参数传递.

You can pass also an object as the third argument, if you want to change the values of the event object properties.

非常感谢您的回答. O_O

Thank you so much for this answer. O_O

这篇关于jQuery注入click()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！