我有一些html有四个部分：
<section class="section"><div class="button"></div></div>
<section class="section"><div class="button"></div></div>
<section class="section"><div class="button"></div></div>
<section class="section"><div class="button"></div></div>
在本节的内部有一个div.button类，当用户点击它时，该部分将被展开，覆盖整个页面（内部的所有元素都变得可见），并接收类'is-expanded'< / p>
现在我在那些节点上设置MutationObserver（类'section'）：
utilities.js
class Observer{
constructor(targetClass,buttonHandler){
this.targetClass = targetClass;
}
initObserver(){
let self = this;
const observer = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
if(mutation.target.classList.contains(self.targetClass)){
let menuButton = Array.from(mutation.target.children).find(function(el){
return el.classList.contains('menu-heading')
})
self.buttonHandler.disable(menuButton)
console.log(menuButton)
}
else if(!mutation.target.classList.contains(self.targetClass)){
let menuButton = Array.from(mutation.target.children).find(function(el){
return el.classList.contains('menu-heading')
})
self.buttonHandler.enable(menuButton)
}
})
}
return observer
}
}
main.js
const observer = new utilities.Observer(expandedClass).initObserver()
const sections = Array.from(document.querySelectorAll('.section'));
document.addEventListener('DOMContentLoaded',function(){
sections.forEach(function(section){
observer.observe(section,{attributes:true})
})
})
我是突发观察api的新手，可以这个好用吗？甚至在性能方面（而不是在点击等时使用addEventListener）
感谢
修改 我更新代码，现在我想要的是，如果section扩展了类，子按钮（带有类.menu-heading）将css样式的pointerEvents设置为none，如果没有目标类则为auto。 buttonhandler类的enable函数执行作业