Question

如何删除例如$('table td')的事件监听器，但不删除其子元素的事件监听器？（我有一个表格，其单元格中有按钮）我用.off()尝试过，但是没有用。

edit：例如，我有一个带有一些文本和一个按钮的表格单元。现在td和button有了自己的事件监听器。我只想删除td的事件侦听器，而不删除button的事件侦听器。我知道我可以将事件侦听器删除后再添加回该按钮，但是这种解决方案会给我带来很多问题。

Answer 1

我猜您已经看到诸如this one之类的答案，因为您提到没有删除子元素上的事件侦听器。当然，进行深度克隆是行不通的，但是可以进行的工作是进行深度克隆，然后将子节点转移到该克隆。还有很多工作，但是它会做您想要的。

主要工作在setTimeout中，其余所有工作实际上只是在设置过程中。

在这里，我将附加两个click事件侦听器：一个附加到按钮，另一个附加到容器div。在setTimeout 5秒之前，单击按钮将同时触发两个侦听器（因此您将看到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(){...})命名空间来工作。谢谢您的帮助！

如何在没有子元素的情况下删除某些元素的所有事件侦听器

2 个答案: