jQuery पता लगाता है कि क्या माता-पिता ने 'फोकस' खो दिया है

Question

मैं ड्रॉप डाउन मेनू कीबोर्ड को सुलभ बनाने के लिए तर्क को समझने पर अटक गया हूं। ,

<ul> 
    <li class="primaryMenuItem"> 
     <a href="">Link 1</a> 
     <ul class="popUpMenu"> 
      <li><a href="">Sub Link 1</a></li> 
      <li><a href="">Sub Link 2</a></li> 
     </ul> 
    </li> 
    <li class="primaryMenuItem"> 
     <a href="">Link 2</a> 
     <ul class="popUpMenu"> 
      <li><a href="">Sub Link 1</a></li> 
      <li><a href="">Sub Link 2</a></li> 
     </ul> 
    </li>  
</ul> 

लिंक 1 लिंक 2 और, जब hovered उप-मेनू सूचियों दिखाने (पुल डाउन मेनू) होगा:

एचटीएमएल ऐसे (अतिरिक्त वर्ग स्पष्टता के लिए उपयोग होने वाले नाम) के रूप में जाना जाता है। मैं यह कुछ jQuery और jQuery होवरइन्टेंट प्लगइन के साथ बस ठीक काम कर रहा है।

पकड़ यह है कि यह इस समय माउस के साथ ही काम करता है।

कुंजीपटल के माध्यम से इसे काम करने के लिए अगली चुनौती है।

$('ul.primaryMenuItem a:first').focus([call showMenu function]) 

यह ठीक काम करता है:

मैं आसानी से शीर्ष स्तर लिंक है कि तब माध्यमिक मेनू को गति प्रदान करने ध्यान देने के घटना जोड़ सकते हैं।

मेनू को बंद करने के लिए, एक विकल्प है, एक और मेनू खोलते समय, यह देखने के लिए जांचें कि क्या कोई और खुला है या नहीं, और यदि ऐसा है, तो इसे बंद करें।

यह भी ठीक काम करता है।

जहां यह विफल रहता है, हालांकि, यदि आपके पास अंतिम मेनू खुला है, और इससे बाहर टैब है। चूंकि आपने किसी अन्य मेनू में टैब्ड नहीं किया है, यह एक खुला रहता है।

चुनौती यह पता लगाना है कि मेन्यू को कब/कब बंद करना है और तर्क को जानने के लिए तर्क (jQuery) को समझना है। आदर्श रूप से, जब मेनू पर किसी तत्व पर फ़ोकस होता है तो मेनू के किसी भी बच्चे के अलावा मैं मेनू बंद कर दूंगा।

तार्किक रूप से, मैं इस बात के लिए देख रहा हूँ:

$('li.primaryMenuItem').blur([close $(this).find('ul.popUpMenu')) 

हालांकि, अगर आप ऐसा कर सकते हैं नहीं है, क्योंकि LI है वास्तव में ध्यान केंद्रित करने की जरूरत नहीं है, लेकिन यह के भीतर बल्कि एंकर टैग।

कोई सुझाव?

अद्यतन:

शायद एक बेहतर/आसान सवाल पूछने के लिए रास्ता:

वाया jQuery, वहाँ 'दृश्य' के लिए एक रास्ता है, तो फोकस एक विशेष वस्तु के सभी बच्चों के बाहर ले जाया गया है देखने के लिए है ? focusin और blur और focus के बजाय focusout:

Answer 1

नई jQuery 1.4 कार्यों का प्रयोग करें। यहाँ कैसे focusout अलग है:

focusout घटना एक तत्व जब यह, या इसे की अंदर किसी भी तत्व, ध्यान केंद्रित खो देता है के लिए भेजा जाता है। ब्लर इवेंट से यह अलग है जिसमें पैरेंट तत्वों से फोकस के नुकसान का पता लगाने का समर्थन करता है (दूसरे शब्दों में, यह ईवेंट बबलिंग का समर्थन करता है)।यदि आपका उपयोगकर्ता टैब पर नज़र वह पिछले लंगर चाहिए ध्यान केंद्रित कर दिया है

Answer 2

तार्किक रूप से इस

$('li.primaryMenuItem:last li a:last').blur([do whatever you need to do]) 

प्रयास करें।

तुम भी ऊपर अपने स्वयं के ईवेंट हैंडलर इसलिए की तरह सेट कर सकते हैं:

$('li.primaryMenuItem:last').bind('myblur', function() ...); 

और पिछले एंकर के भीतर यह कलंक घटना फोन:

...blur(function() { 
    $(this).parents('li.primaryMenuItem').trigger('myblur'); ... 

Answer 3

आप क्या ध्यान केंद्रित किया जाँच करने के लिए बुदबुदाती घटना का उपयोग कर सकते फोकसिन घटना पर। मुझे निम्नलिखित कोड के साथ सफलता मिली:

$("li:has(ul.popUpMenu)").focusin(function(e) { 
    $(this).children().fadeIn('slow'); 
    }); 
    $('body').focusin(function(e) { 
    if (!$(e.target).parent().is('ul.popUpMenu li')) { 
     $('ul.popUpMenu').fadeOut('slow'); 
    } 
    }); 

आप इसे (अधिक) संभवतः अधिक अनुकूलित बना सकते हैं, लेकिन यह काम करता है।

Answer 4

यह मैं मदद की ... http://plugins.jquery.com/project/focus

यदि आप अपने आप पैरेंट के भीतर अभी भी कर रहे हैं यह पता लगा लेगा। यह मूल रूप से इसके बजाय काम करने के लिए jQuery फोकसआउट बदलता है, जो मुझे लगता है कि यह कैसे काम करना चाहिए।

<div class="parent"> 
    <input type="text" /> 
    <input type="text" /> 
</div> 

$('#parent').focusout(function() { 
    console.log('focusout of parent'); 
}); 

मैं देख नहीं क्यों अहम टैब बच्चे तत्वों के बीच पाठ फ़ील्ड स्थानांतरित करने के लिए है क्योंकि आपको लगता है कि माता-पिता के भीतर अभी भी कर रहे हैं माता पिता पर focusout को गति प्रदान करना चाहिए। कुछ ऐसा हो रहा है जो आपको एक पल के लिए बाहर ले जाता है और मुझे संदेह है कि यह एक बग है ... इस पर मेरे साथ कोई भी? वैसे भी ऊपर प्लगइन इसे ठीक करता है। अपने कोड से पहले इसे ठीक करने के लिए बस इसे शामिल करें। किसी को यह बताने के लिए प्यार होगा कि यह बग क्यों नहीं है यदि यह नहीं है।

धन्यवाद, Dom

Answer 5

कैसे के बारे में यदि आप निम्न कार्य: मैं निर्धारित करने के लिए जब एक माता पिता fieldset ध्यान केंद्रित खो देता है और फिर एक फोन कर एक jsfiddle बनाया

$('#link_A_id, #link_A_id > *').focusout(function() { 
    if ($(document.activeElement).closest('#link_A_id').length == 0) 
     //focus is out of link A and it's children 
}); 

Answer 6

मैं एक ऐसी ही समस्या थी ... समारोह। यह निश्चित रूप से अनुकूलित किया जा सकता है, लेकिन यह एक शुरुआत है।

http://jsfiddle.net/EKhLc/10/

function saveFields() { 
    $.each($('fieldset.save'),function(index, value) { 
    // WHERE THE POST WOULD GO 
    alert('saving fieldset with id '+ value.id); 
    $(value).removeClass('save'); 
    }); 

} 
$('.control-group').focusin(function(){ 
    var thefield = $(this).parent('fieldset'); 
    if (!thefield.hasClass('active')) { 
    if($('fieldset.active').length > 0){ 

     $('fieldset.active').removeClass('active').addClass('save'); 
     saveFields(); 
     } 
    thefield.addClass('active'); 
    } else { 
     console.log('already active'); 
    } 
});