当锚标记被覆盖时，更改innerHTML会破坏parentNode？怎么修？
当锚标记被覆盖时，更改innerHTML会破坏parentNode？怎么修？
提问于 2016-01-11 18:05:17
我为click事件设置了两个事件处理程序。一个放在一个表中的所有<th>上，另一个在文档上。
<th>处理程序中的部分代码更改单击元素的innerHTML。关键是，我认为，在th标记中有一个锚标记。
文档处理程序中的部分代码检查单击元素的parentNode。
这两个事实似乎造成了一个问题。如果我注释掉innerHTML修改行，一切都正常。但是，如果保留它，元素的parentNode将获得"null“。
这是一个已知的问题吗?如果是的话，解决办法是什么？这是Chrome中的一个bug，还是因为某种原因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调用中用一个新的锚来替换这个锚。我该怎么解决呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-01-11 20:15:10
之所以发生这种情况，是因为在文档中请求parentNode时，单击的元素不再存在。你用一个完全不同的元素代替了它。
因此，不要更改父元素的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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34728165
复制相关文章
相似问题
腾讯云开发者
