क्रॉस-ब्राउज़र: खिड़की पर धुंधला घटना का पता लगाएं

Question

मैंने अभी पढ़ा है, मुझे लगता है कि इस विषय से संबंधित सभी धागे, और मुझे मेरी समस्या का वास्तविक समाधान नहीं मिल रहा है। मुझे यह पता लगाने की आवश्यकता है कि ब्राउज़र विंडो अपना ध्यान कब खो देती है, यानी एक धुंधला घटना। मैंने स्टैक ओवरफ्लो पर सभी स्क्रिप्ट का प्रयास किया है, लेकिन ऐसा लगता है कि उचित क्रॉस-ब्राउज़र दृष्टिकोण नहीं है।

फ़ायरफ़ॉक्स यहां समस्याग्रस्त ब्राउज़र है।

एक आम दृष्टिकोण jQuery का उपयोग कर रहा है:

window.onblur = function() { 
    console.log('blur'); 
} 
//Or the jQuery equivalent: 
jQuery(window).blur(function(){ 
    console.log('blur'); 
}); 

यह क्रोम, IE और ओपेरा में काम करता है, लेकिन फ़ायरफ़ॉक्स घटना का पता नहीं लगा है।

क्या खिड़की धुंध घटना का पता लगाने के लिए कोई उचित क्रॉस-ब्राउज़र तरीका है? या, अलग से पूछा, क्या फ़ायरफ़ॉक्स ब्राउज़र के साथ विंडो ब्लर इवेंट का पता लगाने का कोई तरीका है?

---

संबंधित प्रश्न और अनुसंधान: फ़ायरफ़ॉक्स कलंक के परीक्षण के लिए

• देखें Firefox 3 window focus and blur
• निम्नलिखित GitHub लेख के अनुसार, jQuery बंद कर दिया समर्थन:
  • https://github.com/jquery/jquery/pull/1423
  • http://bugs.jquery.com/ticket/13363

Answer 1

तुम इतनी तरह, खिड़की पर jQuery के कलंक विधि का उपयोग कर सकते हैं:

$(document).ready(function() { 
    $(window).blur(function() { 
    // Put your blur logic here 
    alert("blur!"); 
    }); 
}); 

यह Firefox, IE, क्रोम और ओपेरा में काम करता है।

Answer 2

ऐसा लगता है कि jQuery अब फ़ायर्फ़ॉक्स के लिए इन परीक्षणों का समर्थन करता है:

• jQuery बग टिकट यहाँ है: http://bugs.jquery.com/ticket/13363
• jQuery पास/प्रतिवाद प्रतिबद्ध यहाँ है: https://github.com/jquery/jquery/pull/1423

मैं तलाश कर रहा हूँ फ़ायरफ़ॉक्स ब्लर इवेंटिंग का समर्थन करने के लिए एक बेहतर तरीका के लिए, लेकिन जब तक मुझे बेहतर दृष्टिकोण नहीं मिलता है, यह मूल स्वीकृत उत्तर के सापेक्ष एक और वर्तमान स्थिति है।

Answer 3

document.hasFocus (MDN) एक कार्यान्वयन है जो फ़ायरफ़ॉक्स के साथ समस्या का समाधान कर सकता है, लेकिन ओपेरा में यह समर्थित नहीं है। इसलिए, एक संयुक्त दृष्टिकोण आपके सामने आने वाली समस्या तक पहुंच सकता है।

नीचे समारोह एक मिसाल है कि कैसे आप इस विधि का उपयोग कर सकते हैं:

function getDocumentFocus() { 
    return document.hasFocus(); 
} 

के बाद से अपने प्रश्न आवेदन (समय समाप्त हो गया, पब/उप प्रणाली, संचालित घटना, आदि) के बारे में पर्याप्त स्पष्ट नहीं है, तो आप उपयोग कर सकते हैं कई तरीकों से उपरोक्त कार्य।

उदाहरण के लिए, एक समयबद्ध सत्यापन इस पहेली (JSFiddle) पर लागू एक की तरह हो सकता है।

Answer 4

मैं addEventListener डोम समारोह

window.addEventListener('blur', function(){console.log('blur')}); 
window.addEventListener('click', function(event){console.log(event.clientX)}); 

मैं यह पहली बार कलंक के बाद काम करने के लिए मिल गया उपयोग करने की कोशिश। लेकिन यह तब काम नहीं करता जब मेरे पास क्लिक फ़ंक्शन संलग्न नहीं था। वहाँ ताज़ा किसी तरह का होता है कि जब एक क्लिक समारोह

Answer 5

व्याख्या की है हो सकता है मैंने कोशिश की दोनों:

document.addEventListener('blur', function(){console.log('blur')}); 

और

window.addEventListener('blur', function(){console.log('blur')}); 

और वे दोनों एफएफ के अपने संस्करण में काम किया (33.1)। http://jsfiddle.net/hzdd06eh/

"रन" विंडो के अंदर क्लिक करें और उसके बाद यह बाहर प्रभाव को गति प्रदान करने:

यहाँ jsfiddle है।

Answer 6

यहां आपके प्रश्न का एक वैकल्पिक समाधान है लेकिन यह Page Visibility API का उपयोग करता है और समाधान Cross Browser संगत है।

(function() { 
    var hidden = "hidden"; 

    // Standards: 
    if (hidden in document) 
     document.addEventListener("visibilitychange", onchange); 
    else if ((hidden = "mozHidden") in document) 
     document.addEventListener("mozvisibilitychange", onchange); 
    else if ((hidden = "webkitHidden") in document) 
     document.addEventListener("webkitvisibilitychange", onchange); 
    else if ((hidden = "msHidden") in document) 
     document.addEventListener("msvisibilitychange", onchange); 
    // IE 9 and lower: 
    else if ("onfocusin" in document) 
     document.onfocusin = document.onfocusout = onchange; 
    // All others: 
    else 
     window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange; 

    function onchange(evt) { 
     var v = "visible", 
      h = "hidden", 
      evtMap = { 
       focus: v, 
       focusin: v, 
       pageshow: v, 
       blur: h, 
       focusout: h, 
       pagehide: h 
      }; 

     evt = evt || window.event; 
     if (evt.type in evtMap) { 
      console.log(evtMap[evt.type]); 
     } else { 

      console.log(this[hidden] ? "hidden" : "visible"); 
     } 
    } 

    // set the initial state (but only if browser supports the Page Visibility API) 
    if (document[hidden] !== undefined) 
     onchange({ 
      type: document[hidden] ? "blur" : "focus" 
     }); 
})();