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 });
});

有没有办法在MutationObserver机制触发之前捕获元素状态（onVisibilityChanged）？

1 个答案: