尽管使用.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>
@@ Batu.Khan意外地将我指向正确的方向,因此我在此处发布了解决方案。
事实并非如此。运行
labelFocusLost()
将从DOM中删除元素。但是,一旦元素消失,焦点也将丢失在元素上,因此labelFocusLost()
将再次触发。除此之外,将不再有要删除的元素。解决方法非常简单。而不是跑步labelFocusLost()
,只需使用强制元素失去焦点.blur()
,这将依次运行labelFocusLost()
并删除元件。由于焦点已被移除,因此无法运行第二次。
此修复最终仅是
if (exit) { event.target.blur() }