如何删除某些元素的所有事件侦听器而不使用其子元素

Question

我怎么能删除例如$('table td')的事件监听器，而不是它的子元素事件监听器？ （我的单元格中有一个带按钮的表）我用.off()尝试了它，但它不起作用。

编辑：例如，我有一个表格单元格，其中包含一些文本和一个按钮。现在td和button有自己的事件听众。我想删除td的事件监听器，而不删除button的事件监听器。我知道我可以在删除之后将事件监听器添加回按钮，但该解决方案会在我的情况下引起很多问题。

Answer 1

我猜你已经看过像this one这样的答案，因为你提到不删除子元素上的事件监听器。当然，执行深度克隆将无法正常工作，但可行的方法是执行浅层克隆，然后将子节点传输到克隆。这是一个更多的工作，但它会做你想要的。

主要工作是在setTimeout，所有其余的只是设置。

这里我附加了两个click事件监听器：一个用于按钮，另一个用于容器div。在5秒setTimeout之前，单击该按钮将触发两个侦听器（因此您将看到BUTTON和DIV的控制台日志）。在计时器之后，你仍然会看到BUTTON事件。

var rem = document.getElementById('rem');
var btn = document.getElementById('btn');
function onClick(e) {
  var t = e.currentTarget
  console.log(t.tagName);
}
rem.addEventListener('click', onClick);
btn.addEventListener('click', onClick);

setTimeout(() => {
  console.log('removing events from div');

  // shallow clone
  var rem2 = rem.cloneNode(false);

  // make and extract range to doc fragment 
  // for all contents of original div
  var range = document.createRange(); 
  range.setStartBefore(rem.firstChild);
  range.setEndAfter(rem.lastChild);
  var documentFragment = range.extractContents();

  // append doc fragment to clone
  // insert clone and remove old div
  rem2.appendChild(documentFragment);
  document.body.insertBefore(rem2, rem);
  rem.remove();
}, 5000);

<div id='rem'>
  <h3>Heading</h3>
  <button id='btn'>click me</button>
  <p>paragraph <b>bold</b> stuff</p>
</div>

Answer 2

我终于使用命名空间作为on('click.namespace', function(){...})。谢谢你的帮助！