当覆盖锚标记时,更改innerHTML会破坏parentNode吗？怎么修？

Question

我为click事件设置了两个事件处理程序.一个在<th>表中的所有s上,另一个在文档上的通用的.

<th>处理程序中的部分代码更改了单击元素的innerHTML.至关重要的是,我认为标签内部有一个锚th标签.

文档处理程序中的部分代码检查单击元素的parentNode.

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

这是一个已知的问题,如果是这样的解决方案是什么？这是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中,您将遇到所需的行为.

我假设这是因为事件是在on <a>而不是on上触发<th>,然后我在innerHTML调用中用一个新的替换该锚点.我该如何解决这个问题？