Question

我想为页面中的所有html元素分配一个点击处理程序。但在用户点击我的插件按钮后，而不是在页面加载时。

以下是起点。我无法分配全局点击处理程序。有任何想法吗？？感谢。

var buttons = require('sdk/ui/button/action');

var button = buttons.ActionButton({
  id: "fieldResolver",
  label: "Field Resolver",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick() {

}

当我使用jquery时我得到这个错误，所以jquery不是一个选项：消息：ReferenceError：$未定义文档对象不可用

Answer 1

首先，你的附加组件的代码生活在与页面代码不同的，更具特权的上下文中 - 在不久的将来，它们也将是两个不同的过程 - 所以你没有访问权限直接到页面：您必须使用content script。我建议你仔细阅读链接的页面，因为它会提供给你们如何相互沟通。

说，我的想法是：当用户点击按钮时，将内容脚本附加到当前页面，如果还没有。在内容脚本中，听取点击事件，并做你的事情。

以下是main.js

的示例

const { ActionButton } = require("sdk/ui/button/action");
const { data } = require("sdk/self")
const tabs = require('sdk/tabs');

let button = ActionButton({
  id: "fieldResolver",
  label: "Field Resolver",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick() {
  // get the current tab
  let tab = tabs.activeTab;

  // you would probably want to store worker somewhere to be sure
  // that you won't attach more than once
  let worker = tab.attach({
    contentScriptFile: data.url("content.js")
  });
}

如您所见，您需要一个contentScriptFile，它必须位于加载项的数据文件夹中。您的content.js将如下所示：

function clickHandler (event) {
  // do something with the element clicked
  console.log(event.target.outerHTML);
}

window.addEventListener("click", clickHandler);

// We want to clean the page if the worker is destroyed
self.port.on("detach", function() {
  window.removeEventListener("click", clickHandler);
})

您可以随时删除呼叫worker.destroy()的工作人员。正如我所说，你可能希望将worker存储在某个地方，就像地图一样，这样只有在没有任何工人用于该标签/网址的情况下才会附加脚本。

Answer 2

向窗口添加单击侦听器，然后选中event.target：

function handleClick() {
    //try using jquery here. if $ doesnt work try window.$
    window.addEventListener('click', intercept, false);
}

function intercept(e) {
    //try using jquery here. if $ doesnt work try window.$ or try e.target.ownerDocument.defaultView.$
    var elementClicked = e.target;
    console.log('elementClicked = ', elementClicked);
    elementClicked.style.border = '1px solid red';
}

向所有元素添加click事件侦听器 - Firefox Add-on

2 个答案: