बचें तत्व कलंक हैंडलर जब लागू खिड़की कलंक (ब्राउज़र ध्यान केंद्रित खो देता है)

Question

सवाल पर व्याख्या करने के लिए:

मैं एक तत्व जो जब क्लिक एक उप-तत्व प्राप्त करता है मिल गया है। उस उप-तत्व को धुंध हैंडलर दिया जाता है।

ब्राउज़र के फोकस (खिड़की धुंध पर) खोने पर उस हैंडलर को नहीं बुलाया जाना चाहिए।

उस लक्ष्य को मैं कई टैक्स का प्रयास किया है की ओर

, इस जा रहा है मेरे वर्तमान प्रयास:

function clicked() { 
    // generate a child element 
    ... 
    field = $(this).children(":first"); 
    $(window).blur(function() { 
     field.unbind("blur"); 
    }); 
    $(window).focus(function() { 
     field.focus(); 
     field.blur(function() { 
      save(this); 
     }); 
    }); 
    field.blur(function() { 
     save(this); 
    }); 
} 

यह काम नहीं करता। ऐसा प्रतीत होता है कि जब ब्राउज़र फोकस खो देता है, तो फ़ील्ड पहले फोकस खो रहा है।

Answer 1

अच्छा सवाल!

यह संभव है, और काफी सरल है।

field.blur(function() { 
    if(document.activeElement !== this) { 
     // this is a blur that isn't a window blur 
    } 
}); 

JSFiddle

या वेनिला जे एस में:

field.addEventListener('blur', function() { 
    if(document.activeElement !== this) { 
     // this is a blur that isn't a window blur 
    } 
}); 

संपादित करें: हालांकि ब्राउज़र साथ अपने जवाब सौदों फोकस खोने, जानते हैं कि फ़ायरफ़ॉक्स unusal व्यवहार है जब लौटने (बग?) ध्यान केंद्रित करने के लिए। यदि आपके पास इनपुट केंद्रित है, और फिर विंडो को फ़ोकस करें, तो तत्व का धुंध ट्रिगर होता है (जो सवाल था)। यदि आप इनपुट के अलावा किसी अन्य चीज़ पर वापस आते हैं, तो धुंधला ईवेंट दूसरा समय निकाल दिया जाता है।

Answer 2

ऐसा करने का एक हल्का गंदा तरीका कार्रवाई करने से पहले setTimeout() का उपयोग करना हो सकता है।

var windowFocus; 

$(window).focus(function() { 
    windowFocus = true; 
}); 

$(window).blur(function() { 
    windowFocus = false; 
}); 

function clicked() { 
    // generate a child element 
    ... 

    field = $(this).children(":first"); 

    field.blur(function() { 
     setTimeout(function() { 
      if (windowFocus) { 
       save(this); 
      } 
     }, 50); 
    }); 
}