2

我正在尝试使用 JavascriptMutationObserver
获取有关元素状态更改的信息，以获取更改之前元素的状态，然后检查当前状态并基于此做出一些决定。

基本上我正在尝试实现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 });
});
4

1 回答 1

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 });
});
于 2014-03-20T18:00:36.393 回答