javascript - 无法在 'removeChild' 上执行 'Node'

Question

我正在使用 http://alexgorbatchev.com/SyntaxHighlighter/在我的网站上突出显示代码，但有时在我的日志中我会收到这样的 Javascript 错误:

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?

Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

// set up handler for lost focus
attachEvent(textarea, 'blur', function(e)
{
   textarea.parentNode.removeChild(textarea);
   removeClass(highlighterDiv, 'source');
});

这是 attachEvent() 函数代码:

function attachEvent(obj, type, func, scope)
{
    function handler(e)
    {
        e = e || window.event;
        
        if (!e.target)
        {
            e.target = e.srcElement;
            e.preventDefault = function()
            {
                this.returnValue = false;
            };
        }
            
        func.call(scope || window, e);
    };
    
    if (obj.attachEvent) 
    {
        obj.attachEvent('on' + type, handler);
    }
    else 
    {
        obj.addEventListener(type, handler, false);
    }
};

谁能帮忙解决这个问题？

Answer 1

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

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

因此，当您调用 removeChild 时，blur 事件再次被触发，但是这次 textarea < em>仍然 定义了它的 parentNode，但是 textarea 不再是它父节点的子节点了! (是的，读两遍。或更多。)

虽然 Firefox 有 planned to do the same，但目前在 Chrome 中会发生这种情况很长一段时间。

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

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

我假设您有一些 detachEvent 函数来删除事件监听器。根据您的需要调整代码。

或者，您可以在监听器函数中的文本区域上设置一个标志(如属性或特性，或者更好的范围变量)，并在继续删除节点之前检查它:

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 附加事件监听器的工作，但是此功能将出现在 standard addEventListener 中。也是:

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