Question

我正在尝试制作一个解除网站本身添加的点击事件的扩展程序。

该网站使用jQuery，这将使这非常简单：

jQuery('a[rel]').unbind('click');

问题是我的扩展（使用“content_scripts”）无法访问网站的jQuery对象，因此没有取消绑定的事件功能。我可以在我的扩展中包含一个jQuery，但这没有用，因为jQuery将'data'存储在jQuery对象中（而不是在DOM元素中）。我的jQuery不会存储这些事件。

还有其他方法吗？它不一定非常漂亮。也许没有“content_scripts”？

Answer 1

var unbind_event_listeners = function (node) {
    var parent = node.parentNode;
    if (parent) {
        parent.replaceChild(node.cloneNode(true), node);
    } else {
        var ex = new Error("Cannot remove event listeners from detached or document nodes");
        ex.code = DOMException[ex.name = "HIERARCHY_REQUEST_ERR"];
        throw ex;
    }
};

只需调用unbind_event_listeners(a_node)即可取消绑定节点中的所有侦听器。这将适用于文档中除document之外的每个节点。至于window，你运气不好。 unbind_event_listeners(document.documentElement)应删除附加到文档中节点的大多数事件侦听器。

如果是a[rel]，您需要这样做：

var nodes = document.querySelectorAll("a[rel]"), i = nodes.length;
while (i--) {
    unbind_event_listeners(nodes.item(i));
}

Answer 2

如果它不需要漂亮而且你可以做一些像hack一样的事情，这应该强制解除绑定到该元素的每个点击监听器：

var el = document.querySelector('a[rel]');
el.onclick = function() {};
el.addEventListener = function() {};

或每个元素：

Array.prototype.slice.call(document.querySelectorAll('a[rel]')).forEach(function(el) {
  el.onclick = function() {};
  el.addEventListener = function() {};
});

编辑：你可以做一些更丑陋的事情并在“document_start”上运行内容脚本并执行：

Element.prototype.addEventListener = (function() {
  var real = Element.prototype.addEventListener;
  return function(ev) {
    if (ev === 'click' && this.tagName === 'A' && this.hasAttribute('rel')) {
      console.log('try again, jquery!');
    } else {
      return real.apply(this, arguments);
    }
  };
})();

使用Chrome扩展程序取消绑定点击活动？

2 个答案: