jQuery दोनों फोकस को संभालने और एक तत्व पर क्लिक करें

Question

मैं डेटा एंट्री वेब एप्लिकेशन को ठीक-ठीक करने के लिए वर्कफ़्लो निर्धारित करने का प्रयास कर रहा हूं। एक वेब पृष्ठ पर कई रूपों पते चित्र:

1. Name___________ 
    Street_________ 
    Phone__________ 

    2. Name___________ 
    Street_________ 
    Phone__________ 

    [...many more...] 

अब मुझे पता करने के लिए उपयोगकर्ता दूसरा "नाम" फ़ील्ड को पाने के लिए टैब कुंजी का उपयोग कर रहा है, तो चाहते हैं (या कि रिकॉर्ड के भीतर कहीं भी), या अगर वे माउस पर क्लिक करने के लिए इसका उपयोग कर रहे हैं। (या Shift-Tab रिवर्स में स्थानांतरित करने के लिए।)

मैं दोनों ध्यान केंद्रित करने पर कोई हैंडलर निर्धारित किया है और क्लिक इनपुट फ़ील्ड के लिए:

$('input').click(function() { TabulateClick(this) }); 
$('input').focus(function() { TabulateFocus(this) }); 

और हैंडलर में, मैं जो संबोधित उपयोगकर्ता के निर्धारित काम कर रहे हैं और क्या हमने पता रिकॉर्ड "स्विच" किया है। (यदि फोकस पहले पते के लिए "फ़ोन" में था, और आप एक ही पते में "नाम" फ़ील्ड पर क्लिक करें, जो वास्तव में रिकॉर्ड को स्विच नहीं है, तो मुझे लगता है कि सारणीबद्ध नहीं है।)

function TabulateClick(field) 
    { 
     var currentAddressRecord = FindAddress(field); 
     if (lastAddressRecord != currentAddressRecord) 
      switchedAddressesWithClick++; 
     lastAddressRecord = currentAddress; 
    } 
    function TabulateFocus(field) 
    { 
     var currentAddress = FindAddress(field); 
     if (lastAddressRecord != currentAddressRecord) 
      switchedAddressesWithTab++; 
     lastAddressRecord = currentAddress; 
    } 

मेरे समस्या यह है कि जब मैं मैदान में माउस क्लिक करें focus घटना आग पहले एक झूठी switchedAddressesWithTab सारणी और currentAddress बदल रहा है (कि बुरा है)। जब click हैंडलर चलता है, तो lastAddressRecord खराब हो जाता है।

क्या focus हैंडलर के अंदर कोई तरीका है यह जानने के लिए कि एक ही ऑब्जेक्ट पर लंबित click ईवेंट है? या click हैंडलर में यह जानने के लिए कि यह पहले focus द्वारा संभाला गया था?

Answer 1

यहाँ कुछ मैं तथ्य यह है कि mousedown फोकस से पहले होता है के आधार पर काम करता है लगता है कि है। demo देखें।

var lastClick = null; 
$('input').mousedown(function(e) { 
    lastClick = e.target; 
}).focus(function(e){ 
    if (e.target == lastClick) { 
     console.log('click'); 
    } else { 
     console.log('tab');  
    } 
    lastClick = null; 

}); 

बग योशिय्याह द्वारा की खोज ठीक करने के लिए, मैं नीचे करने के लिए अपने कोड बदल दिया है। demo देखें।

var lastFocusedElement = null; 
var isClick = false; 
$('input').mousedown(function(e) {  
    isClick= true; 
}).focus(function(e){ 

    // To prevent focus firing when element already had focus 
    if (lastFocusedElement != e.target) { 
     if (isClick) { 
      console.log('click ----'); 
     } else { 
      console.log('tab -----');  
     } 
     lastFocusedElement = e.target; 
     isClick = false; 
    } 
}); 

$(document.body).focus(function(){ 
    lastFocusedElement = document.body; 
}); 

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

मुझे लगता है कि यह सबसे नज़दीक है जो आपको मिलेगा, मैं इसे आपके पृष्ठ पर आज़माउंगा और देख सकता हूं कि व्यवहार पर्याप्त है या नहीं।

Answer 2

बस ध्यान केंद्रित करें और फिर e.which == 9 // tab देखें या नहीं, यह देखने के लिए ईवेंट की जांच करें।

मेरा मूल विचार काम नहीं किया (धन्यवाद @ जुआन)। घटनाओं के संयोजन का उपयोग करके आपको वह स्थान मिलना चाहिए जहां आप बनना चाहते हैं। यदि उपयोगकर्ता टेक्स्ट बॉक्स में क्लिक करता है तो अंतिम कुंजी प्रेस एक टैब नहीं होगी। सभी इनपुट फ़ोकस ईवेंट को पास करने के लिए अंतिम कुंजी कोड देख रहे हैं और संग्रहीत कर रहे हैं। here is the fiddle

var lastKeyCode = 0; 
$('input').focus(function(e) { 
    if(lastKeyCode == 9) 
     // tabbed into field 
    else 
     // clicked into field 
}).keydown(function(e){ 
    if(e.which == 9) // added timeout to clear lastkeypress 
     setTimeout(function(){lastKeyPress = 0}, 50); 
    lastKeyPress = e.which; // store last key code 
}); 

Answer 3

आप jQuery में .on() विधि का उपयोग कर सकते हैं। एक ही तत्व पर दोनों घटनाओं को बांधने का एक और तरीका है।

var hasClicked = false; 
$('.myinputfield').on('mousedown : click',function(e){ 
    if (e.type == 'mousedown') { 
     // execute code 
     hasClicked = true; 
    } 
    if(e.type == 'focus' && !hasClicked) { 
     //execute code 
     console.log(e.type) 
    } 
    hasClicked = false; 
});