ผู้ฟังเหตุการณ์เมื่อมองเห็นองค์ประกอบ?

ฉันกำลังสร้างแถบเครื่องมือที่จะรวมอยู่ในเพจ div ที่มันจะถูกรวมอยู่ในจะเริ่มต้นกับdisplay: none มีวิธีใดบ้างที่ฉันสามารถใส่ตัวฟังเหตุการณ์บนแถบเครื่องมือของฉันเพื่อฟังเมื่อมองเห็นได้เพื่อให้สามารถเริ่มต้นได้ หรือฉันจะต้องส่งตัวแปรจากหน้าที่มี?

ขอบคุณ

เหตุการณ์Javascriptจัดการกับการโต้ตอบของผู้ใช้หากรหัสของคุณได้รับการจัดระเบียบเพียงพอคุณควรจะสามารถเรียกใช้ฟังก์ชันเริ่มต้นในตำแหน่งเดียวกับที่การมองเห็นเปลี่ยนไป (เช่นคุณไม่ควรเปลี่ยนmyElement.style.displayในหลาย ๆ ที่ให้เรียกใช้ฟังก์ชัน / วิธีการแทน สิ่งนี้และสิ่งอื่นที่คุณอาจต้องการ)

ในอนาคต HTML Intersection Observer API ใหม่คือสิ่งที่คุณกำลังมองหา ช่วยให้คุณกำหนดค่าการเรียกกลับที่เรียกเมื่อใดก็ตามที่องค์ประกอบหนึ่งที่เรียกว่าเป้าหมายตัดกับวิวพอร์ตของอุปกรณ์หรือองค์ประกอบที่ระบุ มีให้บริการใน Chrome, Firefox และ Edge เวอร์ชันล่าสุด ดูhttps://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_APIสำหรับข้อมูลเพิ่มเติม

ตัวอย่างโค้ดง่ายๆสำหรับการสังเกตการแสดงผล: ไม่มีการสลับ:

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

ในการดำเนินการ: 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 });

ฉันอาจจะช้าไปหน่อย แต่คุณสามารถใช้ MutationObserver เพื่อสังเกตการเปลี่ยนแปลงขององค์ประกอบที่ต้องการได้ หากมีการเปลี่ยนแปลงเกิดขึ้นคุณจะต้องตรวจสอบว่าองค์ประกอบนั้นแสดงอยู่หรือไม่

มีอย่างน้อยหนึ่งวิธี แต่ก็ไม่ใช่วิธีที่ดีนัก คุณสามารถสำรวจองค์ประกอบเพื่อดูการเปลี่ยนแปลงดังนี้:

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

มาตรฐาน DOM ยังระบุเหตุการณ์การกลายพันธุ์ด้วย แต่ฉันไม่เคยมีโอกาสได้ใช้และฉันไม่แน่ใจว่ามันรองรับได้ดีแค่ไหน คุณจะใช้มันในลักษณะนี้:

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

รหัสนี้อยู่ด้านบนของหัวของฉันฉันจึงไม่แน่ใจว่าจะใช้ได้หรือไม่

ที่ดีที่สุดและง่ายที่สุดในการแก้ปัญหาที่จะมีการเรียกกลับในฟังก์ชั่นการแสดงเป้าหมายของคุณ

ฉันมีปัญหาเดียวกันนี้และสร้างปลั๊กอิน jQuery เพื่อแก้ปัญหาสำหรับไซต์ของเรา

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

นี่คือวิธีที่คุณจะใช้ตามตัวอย่างของคุณ:

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

ดังที่ @figha กล่าวว่าหากนี่เป็นหน้าเว็บของคุณเองคุณควรเรียกใช้สิ่งที่คุณต้องการเพื่อเรียกใช้หลังจากที่คุณทำให้องค์ประกอบมองเห็นได้

อย่างไรก็ตามเพื่อวัตถุประสงค์ในการตอบคำถาม (และใครก็ตามที่สร้าง Chrome หรือ Firefox Extensionsซึ่งเป็นกรณีการใช้งานทั่วไป) Mutation SummaryและMutation Observerจะอนุญาตให้การเปลี่ยนแปลง DOM ทริกเกอร์เหตุการณ์

ตัวอย่างเช่นการทริกเกอร์เหตุการณ์สำหรับองค์ประกอบที่มีdata-widgetการเพิ่มแอตทริบิวต์ไปยัง DOM ยืมตัวอย่างที่ยอดเยี่ยมนี้จากบล็อกของ David Walsh :

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

คำตอบรวมadded, removed,valueChangedและอื่น ๆ valueChangedรวมคุณสมบัติทั้งหมดรวมถึงdisplayอื่น ๆ

คุณสามารถลองใช้ปลั๊กอิน jQuery ได้ที่https://github.com/morr/jquery.appear

เพียงเพื่อแสดงความคิดเห็นเกี่ยวกับการสนับสนุนเบราว์เซอร์ตัวฟังเหตุการณ์ DOMAttrModified:

รองรับข้ามเบราว์เซอร์

เหตุการณ์เหล่านี้จะไม่ถูกนำไปใช้อย่างสม่ำเสมอในเบราว์เซอร์ต่างๆตัวอย่างเช่น:

• IE ก่อนเวอร์ชัน 9 ไม่รองรับเหตุการณ์การกลายพันธุ์เลยและไม่ได้ใช้งานบางอย่างอย่างถูกต้องในเวอร์ชัน 9 (ตัวอย่างเช่น DOMNodeInserted)

• WebKit ไม่รองรับ DOMAttrModified (ดูข้อผิดพลาดของ webkit 8191 และวิธีแก้ไขปัญหาชั่วคราว)

• "เหตุการณ์ชื่อการกลายพันธุ์" เช่น DOMElementNameChanged และ DOMAttributeNameChanged ไม่ได้รับการสนับสนุนใน Firefox (ในเวอร์ชัน 11) และอาจอยู่ในเบราว์เซอร์อื่นด้วย

ที่มา: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

ทางออกของฉัน:

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

ตัวอย่างเช่น:

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

function processMoreLessButton(){
//some logic
}