Odbiornik zdarzeń, kiedy element staje się widoczny?

Buduję pasek narzędzi, który zostanie dołączony do strony. div, w którym ma zostać umieszczony, domyślnie wyświetli: none . Czy istnieje sposób, w jaki mogę umieścić detektor zdarzeń na pasku narzędzi, aby nasłuchiwał, kiedy stanie się widoczny, aby można go było zainicjować? czy będę musiał przekazać mu zmienną ze strony zawierającej?

Dzięki

Zdarzenia JavaScript dotyczą interakcji użytkownika , jeśli twój kod jest wystarczająco zorganizowany, powinieneś być w stanie wywołać funkcję inicjalizującą w tym samym miejscu, w którym zmienia się widoczność (tj. Nie powinieneś zmieniać myElement.style.displayw wielu miejscach, zamiast tego wywołaj funkcję / metodę, która to robi to i wszystko, czego możesz chcieć).

Idąc dalej, nowy interfejs HTML Intersection Observer API jest tym, czego szukasz. Umożliwia skonfigurowanie wywołania zwrotnego, które jest wywoływane za każdym razem, gdy jeden element, zwany celem, przecina widok urządzenia lub określony element. Jest dostępny w najnowszych wersjach Chrome, Firefox i Edge. Więcej informacji można znaleźć pod adresem https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API .

Prosty przykład kodu do obserwowania wyświetlacza: brak przełączania:

// Start observing visbility of element. On change, the
//   the callback is called with Boolean visibility as
//   argument:

respondToVisibility(element, callback) {
  var options = {
    root: document.documentElement
  }

  var observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      callback(entry.intersectionRatio > 0);
    });
  }, options);

  observer.observe(element);
}

W akcji: https://jsfiddle.net/elmarj/u35tez5n/5/

var targetNode = document.getElementById('elementId');
var observer = new MutationObserver(function(){
    if(targetNode.style.display != 'none'){
        // doSomething
    }
});
observer.observe(targetNode, { attributes: true, childList: true });

Mogę się trochę spóźnić, ale możesz po prostu użyć MutationObserver, aby zaobserwować zmiany w wybranym elemencie. Jeśli nastąpi jakakolwiek zmiana, wystarczy sprawdzić, czy element jest wyświetlany.

Jest co najmniej jeden sposób, ale nie jest on dobry. Możesz po prostu sondować element pod kątem takich zmian:

var previous_style,
    poll = window.setInterval(function()
{
    var current_style = document.getElementById('target').style.display;
    if (previous_style != current_style) {
        alert('style changed');
        window.clearInterval(poll);
    } else {
        previous_style = current_style;
    }
}, 100);

Standard DOM określa również zdarzenia mutacji , ale nigdy nie miałem okazji ich używać i nie jestem pewien, jak dobrze są obsługiwane. Używałbyś ich w ten sposób:

target.addEventListener('DOMAttrModified', function()
{
    if (e.attrName == 'style') {
        alert('style changed');
    }
}, false);

Ten kod nie przychodzi mi do głowy, więc nie jestem pewien, czy zadziała.

Najlepszym i najprostszym rozwiązaniem byłoby mieć wywołania zwrotnego w funkcji wyświetlając swój cel.

Miałem ten sam problem i stworzyłem wtyczkę jQuery, aby rozwiązać go dla naszej witryny.

https://github.com/shaunbowe/jquery.visibilityChanged

Oto, jak możesz go użyć na podstawie swojego przykładu:

$('#contentDiv').visibilityChanged(function(element, visible) {
    alert("do something");
});

Jak mówi @figha, jeśli jest to Twoja własna strona internetowa , powinieneś po prostu uruchomić wszystko, czego potrzebujesz , po tym , jak sprawisz, że element będzie widoczny.

Jednak w celu udzielenia odpowiedzi na to pytanie (i każdemu, kto tworzy rozszerzenia Chrome lub Firefox , gdzie jest to typowy przypadek użycia), Podsumowanie mutacji i Obserwator mutacji pozwolą zmianom DOM na wyzwalanie zdarzeń.

Na przykład wyzwolenie zdarzenia dla elementu z data-widgetatrybutem dodawanym do DOM. Pożyczając ten doskonały przykład z bloga Davida Walsha :

var observer = new MutationObserver(function(mutations) {
    // For the sake of...observation...let's output the mutation to console to see how this all works
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });    
});

// Notify me of everything!
var observerConfig = {
    attributes: true, 
    childList: true, 
    characterData: true 
};

// Node, config
// In this case we'll listen to all changes to body and child nodes
var targetNode = document.body;
observer.observe(targetNode, observerConfig);

Odpowiedzi m.in. added, removed, valueChangedi więcej . valueChangedobejmuje wszystkie atrybuty, w tym displayitp.

Możesz także wypróbować tę wtyczkę jQuery: https://github.com/morr/jquery.appear

Wystarczy skomentować obsługę przeglądarki nasłuchiwania zdarzeń DOMAttrModified:

Obsługa wielu przeglądarek

Te zdarzenia nie są konsekwentnie implementowane w różnych przeglądarkach, na przykład:

• IE przed wersją 9 w ogóle nie obsługiwał zdarzeń mutacji i nie implementuje poprawnie niektórych z nich w wersji 9 (na przykład DOMNodeInserted)

• WebKit nie obsługuje DOMAttrModified (zobacz błąd 8191 w webkicie i obejście)

• „Zdarzenia nazw mutacji”, tj. DOMElementNameChanged i DOMAttributeNameChanged nie są obsługiwane w przeglądarce Firefox (od wersji 11) i prawdopodobnie również w innych przeglądarkach.

Źródło: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

moje rozwiązanie:

; (function ($) {
$.each([ "toggle", "show", "hide" ], function( i, name ) {
    var cssFn = $.fn[ name ];
    $.fn[ name ] = function( speed, easing, callback ) {
        if(speed == null || typeof speed === "boolean"){
            var ret=cssFn.apply( this, arguments )
            $.fn.triggerVisibleEvent.apply(this,arguments)
            return ret
        }else{
            var that=this
            var new_callback=function(){
                callback.call(this)
                $.fn.triggerVisibleEvent.apply(that,arguments)
            }
            var ret=this.animate( genFx( name, true ), speed, easing, new_callback )
            return ret
        }
    };
});

$.fn.triggerVisibleEvent=function(){
    this.each(function(){
        if($(this).is(':visible')){
            $(this).trigger('visible')
            $(this).find('[data-trigger-visible-event]').triggerVisibleEvent()
        }
    })
}
})(jQuery);

na przykład:

if(!$info_center.is(':visible')){
    $info_center.attr('data-trigger-visible-event','true').one('visible',processMoreLessButton)
}else{
    processMoreLessButton()
}

function processMoreLessButton(){
//some logic
}