div

2012-01-04 12 views
35

पर क्लिक करते समय फायरिंग फ़ोकस ईवेंट को रोकें यह प्रश्न मेरे पिछले प्रश्न, Click action on Focused DIV, जैसा ही है, लेकिन इस बार मुख्य विषय यह है कि जब मैं divs में से किसी एक पर क्लिक करता हूं तो फ़ोकस ईवेंट को ट्रिगर करने से कैसे रोकें। '- 1' पिछली बार मैंने tabindex = के साथ एक div था यह क्लिक पर फ़ोकस करने योग्य बनाने के लिए, अब मैं> 0 ताकि वे जब साथ ही टैब फोकस हासिल कर सकते हैं tabindex साथ divs की एक सूची है।div

<div tabindex='1'>Div one</div> 
<div tabindex='1'>Div two</div> 
<div tabindex='1'>Div tree</div> 
<div tabindex='1'>Div four</div> 

कुछ स्टाइल:

div { 
    height: 20px; 
    width: 60%; 
    border: solid 1px blue; 
    text-align: center; 
} 
div:focus { 
    border: solid 2px red; 
    outline: none; 
} 

अब मैं एक एक्शन (चेतावनी) आग की एक ध्वज (कार्रवाई) का उपयोग कर रहा है जब 2 बार के लिए div क्लिक करके, और बस एक क्लिक के साथ करता है, तो यह पहले से ही है उदाहरण के लिए, टैब के साथ केंद्रित।

var action = false; 
$('div') 
    .click(function(e){ 
     e.stopImmediatePropagation(); 
     if(action){alert('action');} 
     action = true;}) 
    .focus(function(){action = true;}) 
    .blur(function(){action = false;}); 

ऊपर कोड के साथ समस्या यह फोकस घटना निकाल दिया जाता है किया जा रहा है, जिसका अर्थ है stopImmediatePropagation तरह से मैं उम्मीद .. दो क्लिक कार्रवाई फोकस घटना लाइन टिप्पणी काम करता है काम नहीं करता है, लेकिन आप अभी भी दोगुना करने की जरूरत है क्लिक करें जब div लाभ टैब पर ध्यान केंद्रित करते हैं। http://jsfiddle.net/3MTQK/1/

उत्तर

65

DEMO यहाँ

मुझे लगता है कि तुम यहाँ कुछ भागों याद कर रहे हैं,

  1. event.stopPropagation() बुदबुदाती से घटना को रोकने के लिए प्रयोग किया जाता है। आप इसके बारे में here पढ़ सकते हैं।

  2. event.stopImmediatePropagation() किसी तत्व पर किसी भी अतिरिक्त हैंडलर को निष्पादित करने के अलावा, यह विधि बुलबुले को event.stopPropagation() पर कॉल करके रोकती है। आप इसके बारे में here

  3. यदि आप ब्राउज़र ईवेंट को रोकना चाहते हैं, तो आपको event.preventDefault() का उपयोग करना चाहिए। आप इसके बारे में here

  4. click = mousedown + mouseup -> माउस डाउन सफल होने पर फोकस HTML तत्व पर सेट किया जाएगा। तो बजाय click घटना बंधन की, आप 'mousedown' का उपयोग करना चाहिए। मेरा डेमो देखें।

  5. आप 1 कार्रवाई बूलियन मान उपयोग नहीं कर सकते निर्धारित करने के लिए जो div क्लिक किया जाता है और यह कितनी बार क्लिक किया गया है। यह देखने के लिए कि आप इसे कैसे संभाल सकते हैं, मेरे डेमो देखें।

+0

यदि मैं दो घटनाओं को एक तत्व में बांधता हूं, तो यह कैसे काम करता है? उदाहरण के लिए, यदि मैं लिखता हूं: $ (दस्तावेज़) .on ("टचस्टार्ट क्लिक", ".myelement", फ़ंक्शन (ई) {e.stopImmediatePropagation(); // रन फ़ंक्शन यहां}) .... अगर मैं चालू हूं एक टैबलेट डिवाइस, टचस्टार्ट आग पहले और अन्य सभी घटनाओं को रोका जाएगा? क्योंकि अभी अगर मैं एक तत्व पर क्लिक करता हूं और अपनी अंगुली को दबाता रहता हूं, तो टचस्टार्ट और क्लिक फ़ायर और मेरा फ़ंक्शन दो बार चलाया जाता है। रुक जाएगा ImedimediPropagation इसे ठीक करें? – Alex

0

पल स्पष्ट जवाब टॉगल वर्ग नामों की व्यवस्था करने के लिए बस 'div' से अपने चयनकर्ता प्रतिबंधित करने के लिए होगा के लिए जिससे कि तुम क्या तत्व आपका ध्यान घटना से निकाल देते थे पर नियंत्रित कर सकता है,: यहाँ उदाहरण है। यह अधिक कठिन है और थोड़ा और अपवाद कोडिंग की आवश्यकता है, लेकिन काम करेगा।

+0

मुझे लगता है कि यह काम करेगा, लेकिन स्वीकार किए जाते हैं जवाब बहुत sooo बेहतर है ('event.preventDefault()' 'mousedown' हैंडलर में)। –

3

div पर क्लिक करते समय फायरिंग फोकस को रोकने के लिए बस mousedown + event.preventDefault() का उपयोग करें। बजाय mousedown का उपयोग करें क्लिक करें, क्योंकि जैसा कि @Selvakumar Arumugam बताया गया है, आग ध्यान केंद्रित जब mousedown succesfull और event.preventDefault() (हमारे ध्यान सहित) ब्राउज़र की घटनाओं को रोक देगा।

यहाँ एक कोड उदाहरण है:

$('#div').on('mousedown', function(event) { 
// do your magic 
event.preventDefault(); 
});