ब्लर इवेंट काम से काम पर क्लिक बंद कर देता है?

Question

ऐसा प्रतीत होता है कि ब्लर इवेंट क्लिक ईवेंट हैंडलर को काम करने से रोकता है? मेरे पास एक कॉम्बो बॉक्स है जहां विकल्प केवल तभी दिखाई देते हैं जब टेक्स्ट फ़ील्ड फोकस हो। एक विकल्प लिंक चुनना एक घटना होने का कारण बनना चाहिए। http://jsfiddle.net/uXq5p/6/

पुन: पेश करने के लिए::

1. पाठ बॉक्स
2. लिंक
3. दिखाई दें एक लिंक
4. कलंक भी होता है और लिंक पर क्लिक करें

   मैं यहाँ एक उदाहरण है बेला गायब हो

5. और कुछ नहीं होता है।

अपेक्षित व्यवहार:

चरण 5 पर, कलंक होने के बाद, क्लिक करें यहां तक ​​कि यह भी चाहिए तो आग। मैं ऐसा कैसे करूं?

अद्यतन:

थोड़ी देर के लिए इस के साथ खेलने के बाद, ऐसा लगता है कि किसी को एक संभाला जा रहा से घटना क्लिक पहले से ही हुआ है, तो एक कलंक घटना क्लिक किया तत्व संयुक्त राष्ट्र बनाता है को रोकने के लिए हद तक चला गया है क्लिक करने योग्य।

उदाहरण के लिए:

$('#ShippingGroupListWrapper').css('left','-20px'); 

बस ठीक काम करता है, लेकिन

$('#ShippingGroupListWrapper').css('left','-2000px'); 

क्लिक करें घटना से बचाता है।

यह एक तत्व अन-क्लिक करने योग्य भविष्य क्लिक से बचने चाहिए बनाने के बाद से, फ़ायरफ़ॉक्स में एक बग प्रतीत होता है, लेकिन नहीं जो कि पहले से ही हुआ है जब यह क्लिक किया जा सकता है रद्द कर दें।

अन्य चीजें हैं जो प्रसंस्करण से क्लिक करें घटना को रोकने:

$('#ShippingGroupListWrapper').css('z-index','-20'); 
$('#ShippingGroupListWrapper').css('display','none'); 
$('#ShippingGroupListWrapper').css('visibility','hidden'); 
$('#ShippingGroupListWrapper').css('opacity','.5'); 

मैं इस साइट समान समस्या हो रही है उस पर कुछ अन्य प्रश्न मिल गया है। ऐसा लगता है कि चार समाधान तैर रहे हैं:

1. देरी का उपयोग करें। यह बुरा है क्योंकि यह छिपाने और क्लिक इवेंट हैंडलर के बीच दौड़ की स्थिति बनाता है। यह भी मैला है।

2. mousedown ईवेंट का उपयोग करें। लेकिन यह click एक लिंक के लिए सही घटना के बाद से यह एक अच्छा समाधान नहीं है। mousedown का व्यवहार यूएक्स परिप्रेक्ष्य से प्रति-अंतर्ज्ञानी है, खासकर जब आप बटन को जारी करने से पहले माउस को तत्व से बाहर ले जाकर क्लिक को रद्द नहीं कर सकते हैं।

मैं कुछ और सोच सकता हूं।

mouseover और mouseoutलिंक सक्षम करने के लिए पर 3.Use/क्षेत्र के लिए कलंक घटना को अक्षम करें। चूंकि माउस शामिल नहीं है, यह कुंजीपटल टैबिंग के साथ काम नहीं करता है।

4. सबसे अच्छा समाधान होगा कुछ की तरह:

$('#ShippingGroup').blur(function() 
{ 
    if($(document.activeElement) == $('.ShippingGroupLinkList')) 
     return; // The element that now has focus is a link, do nothing 
    $('#ShippingGroupListWrapper').css('display','none'); // hide it. 
} 

दुर्भाग्य से, $(document.activeElement) हमेशा शरीर तत्व है, एक क्लिक किए गए वापस जाने के लिए लगता है। लेकिन हो सकता है कि अगर 1 या तो जानने का एक भरोसेमंद तरीका था। कौन सा तत्व अब फोकस या दो है, जो तत्व धुंध हैंडलर के भीतर धुंध (कौन सा तत्व अस्पष्ट नहीं है) का कारण बनता है। इसके अलावा, क्या कोई अन्य घटना है (mousedown के अलावा) जो धुंध से पहले आग लगती है?

Answer 1

click घटना blur के बाद ट्रिगर्स हो जाती है ताकि लिंक छुपा हो। click के बजाय mousedown का उपयोग करें यह काम करेगा।

$('.ShippingGroupLinkList').live("mousedown", function(e) { 
    alert('You wont see me if your cursor was in the text box'); 
}); 

अन्य विकल्प blur ईवेंट पर लिंक छिपाने से पहले कुछ देरी होनी है। यह आपके लिए जाने के लिए दृष्टिकोण है।

Demo

Answer 2

आप click के बजाय mousedown घटना की कोशिश कर सकते।

$('.ShippingGroupLinkList').live("mousedown", function(e) { 
    alert('You wont see me if your cursor was in the text box'); 
}); 

यह स्पष्ट रूप से सबसे अच्छा समाधान एक mousedown घटना एक click घटना से उपयोगकर्ता के लिए एक ही तरह से हासिल नहीं किया है के रूप में नहीं है। दुर्भाग्यवश, blur ईवेंट mouseup ईवेंट भी रद्द कर देगा।

Answer 3

4. सबसे अच्छा समाधान होगा कुछ की तरह:

$('#ShippingGroup').blur(function() 
{ 
    if($(document.activeElement) == $('.ShippingGroupLinkList')) 
     return; // The element that now has focus is a link, do nothing 
    $('#ShippingGroupListWrapper').css('display','none'); // hide it. 
} 

दुर्भाग्य से, $ (document.activeElement) हमेशा शरीर तत्व है, एक क्लिक किए गए वापस जाने के लिए लगता है। लेकिन हो सकता है कि या तो 1 या तो जानने का भरोसेमंद तरीका था। कौन सा तत्व अब फोकस या दो, है जो धुंध हैंडलर के भीतर से धुंध (जो तत्व धुंधला नहीं है) का कारण बनता है।

आप क्या देख रहे हैं e.relatedTarget है। तो लिंक पर क्लिक करते समय, e.relatedTarget लिंक तत्व के साथ आबादी प्राप्त करनी चाहिए, इसलिए अपने धुंध हैंडलर में, यदि आप क्लिक किए गए तत्व कंटेनर के भीतर है (या सीधे लिंक के साथ इसकी तुलना करें) कंटेनर को छिपाना नहीं चुन सकते हैं:

$('#ShippingGroup').blur(function(e) 
{ 
    if(!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) { 
    // Alt: (!e.relatedTarget || $(e.relatedTarget) == $('.ShippingGroupLinkList')) 

     $('#ShippingGroupListWrapper').css('display','none'); // hide it. 
    } 
} 

(relatedTargetblur घटनाओं के लिए पुराने ब्राउज़र में समर्थित नहीं किया जा सकता है, लेकिन यह क्रोम, Firefox, और Safari के क्षेत्र में नवीनतम काम करने के लिए प्रकट होता है)

Answer 4

वह कार्रवाई है जो mousedown पर एक click पर होना चाहिए प्रदर्शन बुरा UX है ।इसके बजाय, click प्रभावी ढंग से क्या बना है? एक mousedown और mouseup।

इसलिए, mousedown ईवेंट mousedown हैंडलर में ईवेंट को प्रसारित करें, और mouseup हैंडलर में कार्रवाई करें।

ReactJS में एक उदाहरण:

<a onMouseDown={e => e.preventDefault()} 
    onMouseUp={() => alert("CLICK")}> 
    Click me! 
</a>