Question

一般来说，我在页面上有一些带有多个监听器的表单。那些监听器应用于所有文档（例如jQuery的$（document）.on（“click”，“”），现在无法更改。我还需要在模态中显示完全相同的（按结构）形式，并且该表单在屏幕上共享主表单的所有js代码。因此这些表单无法一起工作，当它们都处于活动状态时，会导致第二种形式的按钮单击，例如，触发第一种形式的元素.jQuery的分离几乎是最简单的解决方案为此，但它也删除了屏幕上的所有内容，我想避免这种情况。

在没有从屏幕上实际删除内容的情况下，有没有办法从HTML DOM中分离内容？

我需要的是暂时禁用页面上某些内容的所有事件侦听器，并将其从js-library选择器的搜索中删除（例如，jQuery不应该找到任何内容），但内容仍应显示在屏幕。

这实际上可行吗？

Answer 1

简短回答：你不能

有些人会接近你的目标：

您可以尝试使用shadow dom删除直接访问权限 js-library选择器：他们需要使用::shadow后缀选择器以查找您的内容。

分离您的内容，克隆它，重新附加

var $yourcontent = $(".yourcontentselector").detach();
var $clone = $yourcontent.clone(); //clone the content but not events
$clone.appendTo("body");
//later
$clone.remove();
$yourcontent.appendTo("body");

我假设你正在使用JQuery，你的内容直接进入正文。希望它可以提供帮助

Answer 2

您可以将DOM deep-clone转换为iframe并显示该内容，直到您需要重新附加/取消隐藏原始内容为止。您还必须传输样式表，因为浏览器尚不支持seamless属性。

另一个选项可能是在文档级别附加捕获事件侦听器，并在目标元素与右选择器匹配时停止事件传播。但那不会停止选择器查找。为此，您可以暂时更改节点ID或类。

我还需要在模态中显示完全相同的表单，并且该表单在屏幕上共享主表单的所有js代码。所以这些形式不能合作

那么，这些表单应该具有唯一的名称/ ID，具有两个相同名称或ID is a violation of HTML spec的形式。

如果他们确实有唯一的ID或名称，那么您可以基于逻辑ID。

Answer 3

我认为您可能需要：

  var element = document.getElementById('element');
  var elementParent = document.getElementById('element-parent');
  elClone = element.cloneNode(true);
  console.log('cloned node', elClone);
  elementParent.removeChild(element);
  console.log('after removal: ', document.getElementById('element'));

   // ..... some time later

  elementParent.appendChild(elClone);
  console.log('after appending:' , document.getElementById('element'));

这将从实时选择中删除所有事件侦听器和“隐藏”元素。

从DOM中分离内容

3 个答案: