मध्य-क्लिक क्यों कई मामलों में 'क्लिक' ट्रिगर नहीं करता है?

Question

यहां देखे गए व्यवहार के JSFiddle, मध्य-क्लिक से संबंधित और click क्रोम और एफएफ में ईवेंट है।

'क्लिक' थोड़े sorta काम करता है

दृष्टिकोण 1: एक a तत्व और एक मध्यम क्लिक करने के लिए सीधे एक click हैंडलर आबद्ध क्रोम में हैंडलर को गति प्रदान करेगा लेकिन एफएफ में नहीं।

$('div a').on('click', function(ev) { 
    // middle click triggers this handler 
}); 

दृष्टिकोण 2: एक div जो एक या अधिक a शामिल करने के लिए एक प्रत्यायोजित click हैंडलर में आबद्ध करें। मध्य क्लिक क्रोम या एफएफ में इस हैंडलर को ट्रिगर करेगा। अगर div खाली बाहर शुरू होता है और a तत्वों एक AJAX कॉल द्वारा बाद में भर दिए गए हैं, या कुछ उपयोगकर्ता इनपुट के परिणाम के रूप

$('div').on('click', 'a', function(ev) { 
    // middle click doesn't trigger this handler 
}); 

यह दृष्टिकोण अत्यंत मूल्यवान है।

'mouseup'

काम करता है दोनों ब्राउज़र में काम करने के लिए mouseupclick के बजाय दोनों दृष्टिकोण 1 कारणों और 2 का उपयोग करना।

// Approach 1 w/ mouseup 
$('div a').on('mouseup', function(ev) { 
    // middle click **does** trigger this handler in Chrome and FF 
}); 

// Approach 2 w/ mouseup 
$('div').on('mouseup', 'a', function(ev) { 
    // middle click **does** trigger this handler in Chrome and FF 
}); 

यहाँ mouseup साथ JSFiddle है।

यह दिलचस्प है और कुछ मामलों में उपयोगी हो सकता है, क्योंकि mouseup लगभग click है। लेकिन mouseupclick नहीं है, और मैं click के व्यवहार के बाद हूं। मैं click का एक हैकी mousedown; setTimeout; mouseup अनुकरण बनाना नहीं चाहता हूं।

मुझे पूरा यकीन है कि उत्तर "नोप" है, लेकिन क्या click हैंडलर ट्रिगर करने के लिए मध्य-क्लिक का कारण बनने के लिए एक क्रॉस-ब्राउज़र तरीका है? यदि नहीं, तो क्यों कारण हैं?

Answer 1

क्लिक ईवेंट आम तौर पर बाएं माउस के लिए निकाल दिया जाता है बटन, हालांकि, ब्राउज़र के आधार पर, क्लिक ईवेंट सही और/या मध्य बटन के लिए हो सकता है या नहीं हो सकता है।

इंटरनेट एक्सप्लोरर और फ़ायरफ़ॉक्स में क्लिक ईवेंट को दाएं या मध्य बटन के लिए निकाल दिया नहीं जाता है।

इसलिए, हम मध्यस्थ या दाएं बटन पर ईवेंट हैंडलर के लिए क्लिक ईवेंट का विश्वसनीय रूप से उपयोग नहीं कर सकते हैं।

इसके बजाय, माउस बटन के बीच अंतर करने के लिए हमें mousedown और mouseup ईवेंट का उपयोग करना होगा क्योंकि अधिकांश ब्राउज़र किसी भी माउस बटन के लिए आग mousedown और माउसअप ईवेंट करते हैं।

फ़ायरफ़ॉक्स और क्रोम event.which में एक संख्या होनी चाहिए जिसमें माउस बटन दबाया गया था (1 छोड़ा गया है, 2 मध्यम है, 3 सही है)।

दूसरी तरफ इंटरनेट एक्सप्लोरर में, event.button इंगित करता है कि माउस बटन पर क्लिक किया गया था (1 छोड़ा गया है, 4 मध्यम है, 2 सही है);

event.button फ़ायरफ़ॉक्स और अन्य ब्राउज़रों में भी काम करना चाहिए, लेकिन संख्याएं थोड़ा अलग हो सकती हैं (0 शेष है, 1 मध्य है, 2 सही है)।

तो डाल करने के लिए है कि एक साथ हम आम तौर पर कुछ इस तरह करते हैं: jQuery को सामान्य

document.onmousedown = function(e) { 
    var evt = e==null ? event : e; 

    if (evt.which) { // if e.which, use 2 for middle button 
     if (evt.which === 2) { 
      // middle button clicked 
     } 
    } else if (evt.button) { // and if e.button, use 4 
     if (evt.button === 4) { 
      // middle button clicked 
     } 
    } 
} 

रूप event.which, आप केवल उपयोग करने के लिए है कि jQuery ईवेंट हैंडलर्स में होना चाहिए, और इस तरह के रूप में कर रहा:

$('div a').on('mousedown', function(e) { 
    if (e.which === 2) { 
     // middle button clicked   
    } 
}); 

दूसरे शब्दों में आप ऑनक्लिक घटना का उपयोग नहीं कर सकते हैं, इसलिए इसे अनुकरण करने के लिए आप दोनों mousedown और mouseup का उपयोग कर सकते हैं।

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

$('#test').on({ 
    mousedown: function(e) { 
     if (e.which === 2) { 
      $(this).data('down', true); 
     } 
    }, 
    mouseup: function(e) { 
     if (e.which === 2 && $(this).data('down')) { 
      alert('middle button clicked'); 
      $(this).data('down', false); 
     } 
    } 
}); 

Answer 2

संक्षिप्त उत्तर: नहीं।

सवाल यह है कि आप मध्य क्लिक को कैप्चर करना चाहते हैं? एक मध्य क्लिक वर्तमान पृष्ठ से बातचीत करने के लिए नहीं बल्कि एक नए टैब में एक लिंक खोलने के लिए है।

क्रोम भी वर्तमान में इस व्यवहार droping पर काम कर रहा है: https://code.google.com/p/chromium/issues/detail?id=255

और वहाँ इस समय इस विषय के बारे में W3C मेलिंग सूची पर सामान्य चर्चा है: http://lists.w3.org/Archives/Public/www-dom/2013JulSep/0203.html

---

अब के लिए फिर भी, आप पकड़ कर सकते हैं एक दस्तावेज़-स्तर पर फ़ायरफ़ॉक्स में मिडलक्लिक:

$(document).on('click', function(e){ 
    console.log(e); 
});