Question

我想覆盖click事件的事件处理程序。这是我最初附加的事件处理程序。

include ActiveRecord::Tasks
DatabaseTasks.database_configuration = YAML.load_file('my_database_config.yml')
DatabaseTasks.db_dir = 'db'

在某些条件之后，我想重写这个处理程序并添加新的＆＃39;点击＆＃39;事件。

document.querySelector("[data-id='start-btn']")
            .addEventListener("click", function (evt) {
                //some code
            });

但它仍在执行上一个事件处理程序。我使用了removeEventListener（但我想，它不起作用）。

指导我出错的地方。

Answer 1

只有在使用函数引用而不是将整个函数 body 传递给它和removeEventListener时，

addEventListener才有意义代码的平均质量重复（并且，正如您所发现的，无论如何都不起作用。）

所以，准备一个对你的功能的引用：

function my_func() { /* code */ }

并将其作为处理程序参数传递给add/removeEventListener

document.querySelector('query').addEventListener('click', my_func);
document.querySelector('query').removeEventListener('click', my_func);

有一种更简单的方法可以使用较旧的编码标准。如果您特别希望给定类型和元素只有一个事件处理程序，则可以使用DOM-zero onclick。

document.querySelector('query').onClick = my_func;
document.querySelector('query').onClick = my_func2; /* my_func() will no longer fire */

Answer 2

删除添加了addEventListener的处理程序的唯一方法是使用具有完全相同参数的removeEventListener。这意味着您需要引用原始函数：

var handler = function (evt) {
    //some code
};
document.querySelector("[data-id='start-btn']").addEventListener("click", handler);

然后删除

document.querySelector("[data-id='start-btn']").removeEventListener("click", handler);

Answer 3

从其他答案中可以看到，删除事件侦听器可能是一场噩梦。幸运的是，在某些情况下，有一种更简单的方法：添加另一个事件监听器，该事件监听器可以更早触发并取消其余事件。

在我的情况下，有一个我想覆盖的click事件处理程序，并且我可以添加另一个带有useCapture=true的事件处理程序来覆盖它。

document.body.addEventListener('click',function (e) {
  if (e.target.innerHTML.toLowerCase() == 'regular') {
    e.target.insertAdjacentHTML('afterend','<div>One we do <strong>not want</strong></div>');
    e.preventDefault();
  }
});
document.body.addEventListener('click',function (e) {
  if (e.target.innerHTML.toLowerCase() == 'fixed') {//or any event or other pre-/evaluations/conditions here
    e.target.insertAdjacentHTML('afterend','<div>One we <strong>do want</strong></div>');
    e.preventDefault();
    e.stopPropagation();
  }
  //document.querySelector('.somethingelse').click();//etc.
},true);

<div><a href="#">Regular</a></div>
<div><a href="#">Fixed</a></div>

Answer 4

我正在构建chrome扩展程序，由于某种原因removeEventListener不能按预期工作。我想出的解决方案是使用cloneNode方法。

文档说

克隆节点会复制其所有属性及其值，包括固有（内联）侦听器。它不复制事件使用addEventListener（）或分配给element的侦听器添加的侦听器属性。

我所做的是为我的实际元素创建了一个克隆，并将其替换为克隆的元素。这将从元素中删除所有事件侦听器。一个简单的例子就是

let newClonedElem = myActualElem.cloneNode(true);
myActualElem.parentNode.replaceChild(newClonedElem, myActualElem);

如何覆盖＆＃39;点击＆＃39; javaScript中的事件？

4 个答案: