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

Question

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

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

Answer 1

我猜你已经看到了答案，比如这一次，既然你提到不是子元素删除事件侦听器。 做深克隆当然不行，但是可以做的是做一个浅克隆，然后把子节点转移到克隆上。 这是一个多一点的工作，但它会做你想做的。

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

在这里，我附加了两个单击事件侦听器：一个附加到按钮，一个附加到容器 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(){...}) 。 谢谢你们的帮助！