Есть ли способ захвата состояния элемента до срабатывания механизма MutationObserver (onVisibilityChanged)?

Я пытаюсь получить информацию об изменении состояния элемента с помощью JavaScript MutationObserver
Чтобы получить состояние элемента до изменения, проверьте текущее состояние и на основании этого примите некоторые решения.

В основном я пытаюсь реализовать событие onVisibilityChanged.

Я фиксирую любые изменения в элементах, которые меня интересуют, затем проверяю, видны они или нет. Затем, если видимость отличается от того, что было передано "visibilityChanged".
Я знаю обходной путь, который я мог бы сделать, так как я получаю изменения, которые произошли, я мог бы создать клон элемента (MutationEvent[0].target) и отменить применить все изменения, а затем проверить, виден ли клон, однако это звучит "хакерски" и неэффективно, поэтому Интересно, есть ли способ захвата элемента прямо перед тем, как произошла мутация. Я понимаю, что это длинный путь, так как 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 });
});
Источник

2 ответа

Решение

Один из способов сделать это.
Работает только на изменениях видимости, которые сделаны изменением класса.

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 });
});
Источник

Сегодня есть лучшие альтернативы. В качестве современного подхода я бы предложил API Intersection Observer с несколькими хорошими примерами на следующих страницах. Этот API предназначен для получения уведомлений, когда элемент частично или полностью не виден.

Источник
Другие вопросы по тегам