स्पेसबार चेकबॉक्स पर क्लिक ईवेंट ट्रिगर कर रहा है?

Question

यदि आप चेकबॉक्स पर स्पेसबार करते हैं, तो यह बॉक्स को चेक करता है। सब कुछ ठीक था जब तक कि मैं पैरेंट div पर क्लिक इवेंट को अक्षम करने का निर्णय नहीं लेता, जिसे मैंने महसूस किया, चेकबॉक्स पर स्पेसबार को भी अक्षम कर दिया!

div1.addEventListener("click",function (e) { 
 
    if (e.preventDefault) e.preventDefault(); 
 
    e.cancelBubble = true; 
 
    return false; 
 
}, true);

<div id="div1"> 
 
    <input id="chk1" type="checkbox"> 
 
</div>

http://jsfiddle.net/0t01252x/1/

मैं ऐसा कैसे रोका जा सकता है? यह मेरे लिए एक बहुत ही अजीब व्यवहार की तरह लगता है। घटनाओं क्लिक कर रहे हैं घटनाओं, नहीं कीबोर्ड की घटनाओं पर क्लिक करें ...

नोट: क्रोम और एफएफ

संपादित के साथ परीक्षण किया: सबसे खराब: कंसोल में घटना outputing देता है एक ... MouseEvent!

Answer 1

Quirksmode - click, mousedown, mouseup, dblclick

उपयोगकर्ता द्वारा किसी तत्व पर क्लिक करता है या अन्य साधनों द्वारा एक तत्व को सक्रिय करता है क्लिक करें घटना आग (यानी कीबोर्ड) ... "क्लिक" घटना वास्तव में एक मिथ्या नाम है: इसे "सक्रिय" घटना कहा जाना चाहिए।

इस हल करने के लिए, आप चेकबॉक्स को एक clickऔरkeyup घटना संलग्न कर सकते हैं।

checkbox.addEventListener("click", handleCheckboxEvent, true); 
checkbox.addEventListener("keyup", handleCheckboxEvent, true); 

दोनों घटनाओं को सुनें, और हमेशा डिफ़ॉल्ट व्यवहार को अक्षम करें। वहां से, आप यह निर्धारित कर सकते हैं कि स्पेसबार ने keyup ईवेंट निकाल दिया है यदि कुंजी 32 दबाया गया है (e.keyCode === 32)।

यदि हां, तो मैन्युअल चेकबॉक्स को चेक अगर यह होता है नहीं जाँच की, और इसे अचयनित अगर यह जाँच की है।

function handleCheckboxEvent(e) { 
    e.preventDefault(); 

    if (e.keyCode === 32) { // If spacebar fired the event 
     this.checked = !this.checked; 
    } 
} 

Updated Example - क्रोम/एफएफ/आईई के नवीनतम संस्करणों में परीक्षण किया गया।

(function() { 
 
    var checkbox = document.getElementById('checkbox'); 
 

 
    function handleCheckboxEvent(e) { 
 
     e.preventDefault(); 
 

 
     if (e.keyCode === 32) { // If spacebar fired the event 
 
      this.checked = !this.checked; 
 
     } 
 
    } 
 

 
    checkbox.addEventListener("click", handleCheckboxEvent, true); 
 
    checkbox.addEventListener("keyup", handleCheckboxEvent, true); 
 
})();

<input id="checkbox" type="checkbox" />

Answer 2

काइडो का कोई अच्छा समाधान प्रतीत होता है। व्यवहार के लिए यह स्पष्ट रूप से अपेक्षित है। के अनुसार:

W3C - SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons

onclick घटना पहुंच प्रयोजनों के लिए कीबोर्ड से शुरू हो रहा है। ब्राउज़र क्लिक करें घटना का उपयोग भले ही कीबोर्ड से इसकी शुरू हो रहा घटना में है कि एक माउस नहीं है वर्तमान:

जबकि "onclick" यह माउस से जुड़ा हुआ है की तरह लगता है, ऑनक्लिक ईवेंट वास्तव में डिफ़ॉल्ट करने के लिए मैप किया गया है एक लिंक या बटन की कार्रवाई। डिफ़ॉल्ट कार्रवाई तब होती है जब उपयोगकर्ता माउस, के साथ तत्व पर क्लिक करता है लेकिन यह तब भी होता है जब उपयोगकर्ता तत्व को केंद्रित करता है और एंटर या स्थान हिट करता है, और जब तत्व अभिगम्यता API के माध्यम से ट्रिगर किया जाता है।