无法在'Node'上执行'replaceChild',除了没有失败?

问题描述 投票:0回答:1

尽管使用.replaceChild()时也会出现类似错误,但使用.outerHTML时也会出现此错误。该错误仅在运行labelSubmit()时弹出;直接运行labelFocusLost()不会引发任何错误。令人沮丧的是,它并非无法替代。它实际上可以工作,但是Chrome仍然会引发错误。它在技术上是功能性的,因此,如果这只是一个奇怪的Chrome错误,那没什么大不了的,但是我真的希望日志中的错误尽可能为零。

function labelSubmit(literal) {
    const key  = event.key.toLowerCase()
    const exit = key == "escape" || key == "enter"

    if (exit) { labelFocusLost(literal) }
}

function labelFocusLost(literal) {
    const param   = literal.split(":")
    const target  = event.target
    const escaped = false

    const prev = {
        index: param[0],
        choice: param[1],
        name: target.value.toLowerCase() || param[2]
    }

    const label = `<label for="tabs-${prev.index}" class="default-text radio-label button ${prev.choice}" onpointerup="tabClick()">${escaped ? param[2] : prev.name}</label>`

    target.parentNode.parentNode.replaceChild(textToHTML(label), target.parentNode)
    //target.parentElement.outerHTML = label
}
<div id="tabs" class="grid-tabs debug">
    <input id="tabs-0" type="radio" name="tabs" class="no-display" checked="">
        <div class="default-text input-wrapper">
            <span class="clear input-measure">defaualt tab</span>
            <input maxlength="15" class="clear default-text input" placeholder="input new name here" value="defaualt tab" oninput="labelInput('input new name here')" onkeydown="labelSubmit('0:button-choice:defaualt tab')" onfocusout="labelFocusLost('0:button-choice:defaualt tab')" style="width: 113px;">
        </div>
    <input id="tabs-1" type="radio" name="tabs" class="no-display" />
        <label for="tabs-1" class="default-text radio-label button" onpointerup="tabClick()">default tab</label>
    <button data-choice="" class="clear default-text button" onclick="addTab()">+</button>
</div>
javascript html
1个回答
0
投票

@@ Batu.Khan意外地将我指向正确的方向,因此我在此处发布了解决方案。

事实并非如此。运行labelFocusLost()将从DOM中删除元素。但是,一旦元素消失,焦点也将丢失在元素上,因此labelFocusLost()将再次触发。除此之外,将不再有要删除的元素。解决方法非常简单。而不是跑步labelFocusLost(),只需使用强制元素失去焦点.blur(),这将依次运行labelFocusLost()并删除元件。由于焦点已被移除,因此无法运行第二次。

此修复最终仅是

if (exit) { event.target.blur() }
© www.soinside.com 2019 - 2024. All rights reserved.