监听DOM元素何时被移动

Listening for when a DOM element is moved

本文关键字：移动 何时 元素 DOM 监听      更新时间：2023-09-26

我要做的基本上相当于这个CSS:

position: absolute;
top: calc(100px * nth-child);

考虑到这不是有效的CSS(为第n个子获取n的值并将其乘以另一个值)，我必须使用JavaScript完成此操作。我可以在页面加载时轻松做到这一点。我想做的是监听元素何时被移动或重新排序，以便它可以重新计算其位置。

无论它是在当前的parentNode中移动，还是完全移动到不同的parentNode中，都需要工作。

有人知道怎么做吗?或者，是否有一种方法可以用我不知道的纯CSS来做到这一点?

只是回答了我自己的问题。因为我已经计划使用Web组件，事实证明，attachedCallback做的正是我正在寻找的。

最后，我已经找出了createdCallback和attachedCallback之间的实际用例差异。

假设你有:

<div>
   <my-element id="a"></my-element>
   <my-element id="b"></my-element>
</div>

然后输入:

var a = document.getElementById("a");
a.parentNode.appendChild(a);

这将把#a移动到末尾，产生如下:

<div>
   <my-element id="b"></my-element>
   <my-element id="a"></my-element>
</div>

关键是，当appendChild被调用时(我假设，insertBefore，以及所有其他移动节点的函数)，my-element将首先触发它的detachedCallback，然后是attachedCallback。因此，如果确定其位置的代码包含在attachedCallback:

中
myElementPrototype.attachedCallback = function() {
    var myPosition = [].slice.call(this.parentNode.children).indexOf(this);
}

则无论元素移动到哪里，它都会再次被确定。这应该与Virtual DOM api(如React等)兼容。

至于如何做到这一点没有Web组件，那么我想答案是做任何文档注册元素做填充attachedCallback和detachedCallback。快速浏览一下，它看起来像是mutationobserver的东西，而且相当复杂。

相关文章：