我想检测页面中的元素移动。例如，我有一个带有 offsetheight: 200px 和 offsetleft: 200px 的底部，我希望有一个侦听器来检测元素位置是否已更改（未调整大小
【问题讨论】：
标签： javascript html css angular typescript
您可以使用 MutationObserver 检测元素上的属性是否已更改，或者是否已从 DOM 中添加/删除某些内容。
这是一个简单的示例，其中正文中任何位置的更改都由 console.log 记录。然后可以读取您感兴趣的按钮的偏移量，并对照原始按钮检查它是否已移动。
<!doctype html>
<html>
<head>
<title>Observe</title>
<style>
.movedown {
position: relative;
width: 30vmin;
height: 30vmin;
}
.button {
width: 20vmin;
height: 20vmin;
background: pink;
}
</style>
</head>
<body>
<button onclick="this.classList.toggle('movedown');console.log('button.offsetTop = ' + button.offsetTop);">CLICK ME TO EXTEND/SHRINK ME SO THE OTHER BUTTON MOVES</button>
<button class="button">I AM THE BUTTON YOU ARE INTERESTED IN SEEING WHEN I HAVE MOVED</button>
<div></div>
<script>
//This script copied almost complete from MDN
// Select the node that will be observed for mutations
const targetNode = document.body;
const button = document.querySelector('.button');
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type === 'attributes') {
console.log('A ' + mutation.attributeName + ' attribute was modified.');
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
</script>
</body>
</html>
取自 MDN 的代码，可以找到有关观察此类突变的更多信息。
【讨论】：