javascript - Mutation Observers:检测从父元素继承的可见性变化
问题描述
我试图检测目标元素何时变得可见(可见或显示:块),无论它放在 HTML 中的什么位置。
我尝试使用 MutationObservers,但是,只有当观察到的元素在 CSS 属性中有直接变化时,才能检测到可见性变化。因此,它忽略了对其父元素的更改。
var targetNode = document.getElementById('target');
var observer = new MutationObserver(function(){
alert(targetNode.offsetWidth);
}
);
observer.observe(targetNode, { attributes: true, childList: true });
当父元素 CSS 属性发生更改并且附加到子/目标元素的 MuatationObserver 未检测/观察到此jsfiddle中所见时,就会出现问题。观察到的 DOM 元素是否有办法(除了使用间隔)来检测从父级继承的 CSS 变化?
解决方案
您可以观察父母和孩子:
observer.observe(targetNode, options);
observer.observe(parentNode, options);
var targetNode = document.getElementById('target');
var parentNode = document.getElementById('parent');
var observer = new MutationObserver(function (changes) { // or replace changes by just: [ { target } ]
const target = changes[0].target
if (target === parentNode)
alert('parent')
if (target === targetNode)
alert('target')
console.log(target)
});
var options = {
attributes: true,
childList: true,
attributeFilter: ['style', 'class']
}
observer.observe(targetNode, options);
observer.observe(parentNode, options);
<script>
function showParent() {
document.getElementById("parent").style.display = "block";
}
function showChild() {
document.getElementById("target").style.display = "block";
}
</script>
<button onclick="showParent()">showParent</button>
<button onclick="showChild()">showChild</button>
<div id="parent" style="display:none;">
parent
<div id="target" style="display:none;">target</div>
</div>
推荐阅读
- java - Flink-SQL 窗口表连接?
- unity3d - 如何防止 GameObject 检测到未引用的碰撞
- azure - 执行 VBS 文件的 Azure Batch Task 问题
- javascript - Vuejs如何取回原始数组值
- android-studio - 如何向我的应用程序添加 100 多张图片
- python - SQLAlchemy 关系:一个字段,多个外键
- jquery - RequiredFieldValidator 有时不起作用,但无法重现它
- python - Python 内置 AsyncIO 实现?
- r - tidyverse:将特定日期与活动期间相匹配
- python - Pandas:重命名列上的合并缓冲区错误