我不得不处理同样的问题，答案令人困惑且违反直觉。好吧，它有其逻辑，但会导致不平凡的行为。

本质上，当一个节点从 DOM 树中移除时，它会触发一个blur事件（并且focusout也在一个事件之前）。

因此，当您调用时removeChild，该blur事件将再次被触发，但这次textarea 仍然parentNode定义了它，但textarea不再是其父级的子级！（是的，读两遍。或更多。）

这种情况目前在 Chrome 中发生，尽管 Firefox 已经计划在很长一段时间内这样做。

作为解决方法，您可以删除附加的事件侦听器：

var onblur = function(e) {
    detachEvent(textarea, 'blur', onblur);
    textarea.parentNode.removeChild(textarea);
    removeClass(highlighterDiv, 'source');
};
attachEvent(textarea, 'blur', onblur);

我假设您有一些detachEvent删除事件侦听器的功能。根据您的需要调整代码。

或者，您可以在侦听器函数的 textarea 上设置一个标志（如属性或属性，或者更好的范围变量），并在继续删除节点之前检查它：

var removed = false;
attachEvent(textarea, 'blur', function(e) {
    if (removed) return;
    removed = true;
    textarea.parentNode.removeChild(textarea);
    removeClass(highlighterDiv, 'source');
});

您还可以在删除它之前检查它textarea是否真的是它的子节点parentNode，但这种测试太违反直觉（至少对我而言），我不建议这样做，因为担心这种行为将来会改变.

最后，你总是可以依赖一个try...catch声明，但是......呃。

2016年更新

自然地，使用像 jQuery 这样的框架可以为您节省大量使用 附加事件侦听器的工作one，但此功能也将成为标准addEventListener：

textarea.addEventListener('blur', handler, { once: true });

虽然这个问题的经典答案是它是 JS 代码中的一个错误，但在 React 16 中存在一个主要错误，这意味着任何修改 DOM 的浏览器/扩展机制都会破坏 React。

谷歌浏览器的内置翻译功能是最常见的罪魁祸首。

GitHub 问题：https : //github.com/facebook/react/issues/11538

最小情况：https : //p93xxmr0rq.codesandbox.io/（只需在 Chrome 中手动右键单击“翻译为”并选择日语，然后单击按钮）

解决方法：如何在 chrome 中从 html 禁用谷歌翻译

<meta name="google" content="notranslate">

我在这里冒险，并假设你们中的一些人发现这个问题是因为你在谷歌上搜索了上面引用的错误：

'Node' 上的 'removeChild'：要移除的节点不再是该节点的子节点。也许它是在“模糊”事件处理程序中移动的？

我正在使用 jQuery & DataTables 1.10.6，这个错误确实出现blur()在我更新单元格值的事件中。我的解决方案是在事件中添加一个条件，如下所示：

var blur = false;
$('table').on('blur', 'td select', function() {
    if (!blur) {
        blur = true;
        var cell = $(this).closest('td');
        table.cell(cell).data('example data');
        blur = false;
    }
});

如果没有更好的解决方案，我会感到非常惊讶，但希望这对某人有所帮助，并且可能会获得一些建设性的意见。

尝试使用谷歌浏览器翻译您的网站（右键单击该网站并选择“翻译成英文”。如果您在控制台中看到错误发生，那么您就知道这是由谷歌翻译引起的。

相关 GitHub 问题：https : //github.com/facebook/react/issues/11538。

Dan Abramov 的解决方法：

if (typeof Node === 'function' && Node.prototype) {
  const originalRemoveChild = Node.prototype.removeChild;
  Node.prototype.removeChild = function(child) {
    if (child.parentNode !== this) {
      if (console) {
        console.error('Cannot remove a child from a different parent', child, this);
      }
      return child;
    }
    return originalRemoveChild.apply(this, arguments);
  }

  const originalInsertBefore = Node.prototype.insertBefore;
  Node.prototype.insertBefore = function(newNode, referenceNode) {
    if (referenceNode && referenceNode.parentNode !== this) {
      if (console) {
        console.error('Cannot insert before a reference node from a different parent', referenceNode, this);
      }
      return newNode;
    }
    return originalInsertBefore.apply(this, arguments);
  }
}

在呈现您的应用程序之前运行此代码。请记住，这会对性能造成轻微影响。

Shuhei Kagawa 的解决方法

在<span>.

// Case 1
<div>
  {condition && 'Welcome'}
  <span>Something</span>
</div>

// A workaround for case 1
<div>
  {condition && <span>Welcome</span>}
  <span>Something</span>
</div>

// Case 2
<div>
  {condition && <span>Something</span>}
  Welcome
</div>

// A workaround for case 2
<div>
  {condition && <span>Something</span>}
  <span>Welcome</span>
</div>

详细解释可以在这里找到：https : //github.com/facebook/react/issues/11538#issuecomment-390386520

我使用时间延迟，它像这样对我有用。

    // 设置失去焦点的处理程序
    attachEvent(textarea, 'blur', function(e)
    {
        设置超时（功能（）{
            textarea.parentNode.removeChild(textarea);
            removeClass(highlighterDiv, 'source');
        }, 0);
    });