javascript - 有没有办法在 MutationObserver 机制触发(onVisibilityChanged)之前捕获元素状态？

Question

我正在尝试使用 Javascript MutationObserver
获取有关元素状态变化的信息获取更改前元素的状态，然后检查当前状态，并据此做出一些决定。

基本上我正在尝试实现 onVisibilityChanged 事件。

我会捕获我关心的元素的任何变化，然后我会检查它们是否可见。然后，如果可见性与广播的不同 visibilityChanged。
我知道我可以做的解决方法，因为我得到发生的更改我可以创建元素的克隆 (MutationEvent[0].target) 并恢复应用所有更改然后检查克隆是否可见，但这听起来'hacky' 和低效所以我想知道是否有一种方法可以在突变发生之前捕获元素。我确实知道这是一个远景，因为 MutationObserver 在所有更改发生后被触发，就像在时间旅行一样，但我非常乐意听取您的建议。

var observer = new MutationObserver(function(mutations) {
var itemFromThePast = mutations[0].MagicTimeMachine().GetMeTheItemBeforeItWasChanged; // this is the line that is missing
if ($(itemFromThePast).is(":visible") != $(mutations[0].target).is(":visible"))
      {
       console.log('I win!');
      }
    
});
var targets = $('.ui-collapsible-content');

$.each(targets, function(i,target){
observer.observe(target, { attributes: true, childList: false, characterData : true,     characterDataOldValue : true });
});

Answer 1

一种方法。
仅适用于由类更改所做的可见性更改。

var observer = new MutationObserver(function(mutations) {
    var clone = $(mutations[0].target).clone();
    clone.removeClass();
    for(var i = 0; i < mutations.length; i++){
        clone.addClass(mutations[i].oldValue);
    }
    $(document.body).append(clone);
    var cloneVisibility = $(clone).is(":visible");
    $(clone).remove();
    if (cloneVisibility != $(mutations[0].target).is(":visible")){
        var visibilityChangedEvent = document.createEvent('Event');
        visibilityChangedEvent.initEvent('visibilityChanged', true, true);
        mutations[0].target.dispatchEvent(visibilityChangedEvent);
    }
});

var targets = $('.ui-collapsible-content');
$.each(targets, function(i,target){
    target.addEventListener('visibilityChanged', function(){ console.log('Kaboom babe');});
    observer.observe(target, { attributes: true, attributeFilter : ['class'], childList: false, attributeOldValue: true });
});