0

我目前正在构建一个浏览器扩展程序，将 javascript/jquery 注入某些页面，并且我遇到了一个奇怪的问题，强制.click()事件无法从我的注入代码中工作。奇怪的是，如果我从控制台 js 控制台进行调用，它完全可以正常工作。

我真的不明白问题是什么。看来我所有的其他电话都工作正常。我可以使用绑定到单击事件.click(function(){...})（很明显我的 jquery 已正确加载），并在单击内容时调用方法（很明显我的 jquery 已正确加载），但第二次我尝试强制单击，调用只是不通过。

任何人都可以解释发生了什么，或者我可以解决它的方法吗？

（我无法重新创建这个问题，因为这个问题显然与在扩展中注入 js 有关）

这是我能做的最好的娱乐：

//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")')。有人有其他建议吗？

4

1 回答 1

2

我终于在这里找到了一个非常好的答案/解决方法： Trigger events from Firefox browser extension？

来自用户cms：

首先，对于点击事件，你需要创建一个MouseEvents类型的事件对象，而不是HTMLEvents，并且使用event.initMouseEvent而不是event.initEvent。

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

我做了一个简单的函数来模拟 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');

在此处检查测试用法。

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

非常感谢您的回答。O_O

于 2012-04-30T19:58:20.110 回答