javascript - 覆盖 anchor 标记时更改 innerHTML 会破坏 parentNode 吗？怎么修？

Question

我为点击事件设置了两个事件处理程序。一上所有<th> s 在表格中，另一个通用的在文档中。

<th>中的部分代码处理程序更改被单击元素的 innerHTML。我认为，至关重要的是，th 中有一个 anchor 标记。标签。

文档处理程序中的部分代码检查被单击元素的父节点。

似乎这两个事实导致了问题。如果我注释掉 innerHTML 修改行，一切正常。如果我把它留在里面，我会得到元素的 parentNode 的“null” .

这是一个已知问题吗？如果是，解决方案是什么？这是 Chrome 中的错误，还是 JavaScript/DOM 出于某种原因的行为方式？

function isInside(eChild, eParent) {
  alert('element is ' + eChild);
  if (eChild === eParent) {
    return true;
  }

  if (eChild === document) {
    return false;
  }

  return isInside(eChild.parentNode, eParent);
}

function init1() {
  document.getElementById('th').addEventListener('click', function(e) {
    document.getElementById('th').innerHTML = '<a href="#">Changed</a>';
  });
}

function init2() {
  document.addEventListener('click', function(e) {
    if (isInside(e.target, document.getElementById('table'))) {
      alert('found in table');
    } else {
      alert('not found in table');
    }
  });
}

init1();
init2();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <th id="th"><a href="#">Click me</a>
      </th>
    </tr>
  </thead>
</table>

如果你注释掉

document.getElementById('th').innerHTML = '<a href="#">Changed</a>';

在 JavaScript 中，您将体验到所需的行为。

我假设这是因为事件是在 <a> 上触发的而不是在 <th> 上，然后我在 innerHTML 调用中用一个新的 anchor 替换那个 anchor 。我该如何解决？

Answer 1

发生这种情况是因为在请求其父节点时，被单击的元素不再存在于文档中。您已将其替换为完全不同的元素。

与其更改父级的 innerHTML，从而用新元素替换被点击的元素，不如简单地更改现有元素。

为了节省空间，我在下面压缩了完整的演示，但是解决方案的核心在这里:

var th = document.getElementById('th');
var link = th.querySelector('a');

th.addEventListener('click', function(e) {
  link.textContent = 'Changed';
});

这是演示:

function isInside(eChild, eParent) {
  alert('element is ' + eChild);
  if (eChild === eParent)  return true;
  if (eChild === document) return false;
  return isInside(eChild.parentNode, eParent);
}

var th = document.getElementById('th');
var link = th.querySelector('a');

th.addEventListener('click', function(e) {
  link.textContent = 'Changed';
});

document.addEventListener('click', function(e) {
  if (isInside(e.target, document.getElementById('table'))) alert('found in table');
  else alert('not found in table');
});

<table id="table"><thead><tr><th id="th"><a href="#">Click me</a></th></tr></thead></table>