Question

我为 Firefox 开发了一个扩展程序，它具有许多事件侦听器，尤其是用于预测文本功能的。

它在大多数“简单” textarea，input和contenteditable元素上都很好用。

但是绝对不能在其他重要方面工作。

我的第一个观察结果是，侦听器未应用于大多数WYSIWYG编辑器或已具有许多事件侦听器的元素上。但也有一些随机的。

网站脚本是否能够阻止/阻止添加外部事件侦听器？

什么样的冲突可能导致这种行为？

我想念什么？

这是我的代码：https://github.com/ANN-MB/LEIA/blob/master/extension%20firefox/leia.js

缺少事件（我的事件）的示例：https://ibb.co/SxXJFR4

这是我添加事件侦听器的方式：

document.querySelectorAll("input,textarea").forEach(function(x) {
  if (x.type.match(/SEARCH|TEXT|TEXTAREA/i)) {
    x.addEventListener("keyup", function(e) { 
      middot(e,this) 
    }, false);
  }
});

document.querySelectorAll("[contenteditable],[contenteditable=true]").forEach(function(x) {
  x.addEventListener("keyup", function(e) { 
    middotCE(e,this) 
  }, false);
});

与其他将事件侦听器添加到元素的方式相同（for循环，没有条件匹配等）

编辑

基于Jaromanda X的评论，我做到了。完全适合我的测试页，但在某些网站上还不能使用。因此问题似乎不是动态生成的元素。

// add listeners to contenteditable elements
function addCEListeners(elem) {
    elem.addEventListener("keyup", function(e) { middotCE(e,this); feminizeCE(this); }, false);
    elem.addEventListener("keydown", function(e) { switcherCE(e,this) },false);
}

var callback = function(mutationsList, observer) {
    for (var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            var added_node = mutation.addedNodes[0];

            if (added_node.nodeType == 1) { // if added node is an element
                if (added_node.tagName.match(/INPUT|TEXTAREA/i)) { // if it is any kind of input or a textarea
                    if (added_node.type.match(/TEXT|TEXTAREA/i){ // if it is an input "text" or a textarea
                        added_node.addEventListener("keyup", function(e) { middot(e,this);feminize(this); }, false);
                        added_node.addEventListener("keydown", function(e) { switcher(e,this) },false);
                    }
                    if (added_node.type.match(/SEARCH/i)) { // if it is an input "search"
                        added_node.addEventListener("keyup", function(e) { middot(e,this) },false);
                    }
                } else if (added_node.contentEditable == "true") { // if any other added alement is contenteditable
                    addCEListeners(added_node) 
                }
            }
        } else if (mutation.type == 'attributes' && mutation.attributeName == 'contenteditable') { // if an existing element is given a "contenteditable" attribute
            mutation.target.contentEditable == "true" && addCEListeners(mutation.target); 
        }
    }
};

var observer = new MutationObserver(callback);
observer.observe(document.body, {attributes: true, childList: true, subtree: true});

编辑2：

在检测到新的侦听器时，似乎可以观察到这种行为的某些网站只是用addEventListeners清除了所有removeEventListeners之外的所有内容。

有没有一种解决方法，可以避免添加/删除eventListeners战争？

编辑3：

我找到了一个折衷方案，但对此不满意。我正在听整个文档中的keyup和keypress，如果目标是文本字段，则调用函数。适用于input元素，但不适用于某些contenteditable元素。再加上这是一个沉重的解决方案，对吗？该脚本是为盲人制作的，因此他们经常使用键盘进行导航。因此，有很多按键事件需要处理。

document.addEventListener("keyup",function(e){
    let targ = e.target;

    if (targ.tagName.match(/INPUT|TEXTAREA/i) &&
        targ.type.match(/SEARCH|TEXT|TEXTAREA/i)) {

        middot(e,targ);

        !elem.type.match(/SEARCH/i) && feminize(targ)

    } else if (elem.contentEditable == "true") {

        middotCE(e,targ);
        feminizeCE(targ);
    }   
})

document.addEventListener("keydown",function(e){
    let targ = e.target;

    if (targ.tagName.match(/INPUT|TEXTAREA/i) &&
        targ.type.match(/TEXT|TEXTAREA/i)) {

        switcher(e,targ)

    } else if (targ.contentEditable == "true") {    
        switcherCE(e,targ)
    }   
})

Firefox扩展：事件侦听器未添加到某些元素中

0 个答案: