auxclick, Chrome 55 पर आ रहा है

जेफ़ पॉस्निक

Twitter GitHub होम पेज

एक क्लिक, कब click नहीं होता? जटिल यूज़र इंटरफ़ेस पर काम करने वाले वेब डेवलपर के लिए, यह कोई अमूर्त दार्शनिक सवाल नहीं है. अगर कस्टम माउस इनपुट बिहेवियर को लागू किया जा रहा है, तो उपयोगकर्ता के इंटेंट को ध्यान में रखना ज़रूरी है. उदाहरण के लिए, अगर कोई उपयोगकर्ता अपने माउस के बीच वाले बटन से किसी लिंक पर क्लिक करता है, तो यह मानना सही होगा कि वह उस लिंक के कॉन्टेंट के साथ एक नया टैब खोलना चाहता है. अगर कोई उपयोगकर्ता बीच में दिए गए किसी यूज़र इंटरफ़ेस (यूआई) एलिमेंट पर क्लिक करता है, तो हो सकता है कि आप यह मान लें कि यह अनजाने में हुआ है. साथ ही, उस इनपुट को अनदेखा करके, प्राइमरी बटन पर क्लिक करने से यूज़र इंटरफ़ेस (यूआई) से जवाब ट्रिगर होने की उम्मीद की जा सकती है.

हालांकि, click के सिर्फ़ एक इवेंट लिसनर के ज़रिए, इन छोटी-छोटी गतिविधियों को मॉडल में शामिल किया जा सकता है. आपको MouseEvent की button प्रॉपर्टी की साफ़ तौर पर जांच करके पता लगाना होगा कि कहीं इसे 0 पर सेट किया गया है या नहीं. इसमें मुख्य बटन को दिखाया जाता है, जबकि किसी और चीज़ की जानकारी मिलती है. 1 आम तौर पर बीच वाला बटन दिखाता है और यह क्रम इसी तरह जारी रहता है. हालांकि, बहुत से डेवलपर button प्रॉपर्टी की साफ़ तौर पर जांच नहीं कर पाते. इस वजह से, एक कोड मिलता है जो सभी click को एक जैसा तरीके से हैंडल करता है. इससे कोई फ़र्क़ नहीं पड़ता कि कौनसा बटन दबाया गया था.

Chrome 55 और उसके बाद के वर्शन में, auxclick नाम का एक नए तरह का MouseEvent तब ट्रिगर होता है, जब गैर-मुख्य बटन से किए गए किसी भी क्लिक की वजह से ऐसा होता है. इस नए इवेंट के साथ, click इवेंट के काम करने के तरीके में भी एक बदलाव होता है: यह सिर्फ़ तब चालू होगा, जब मुख्य माउस बटन को दबाया जाएगा. हमें उम्मीद है कि इन बदलावों से वेब डेवलपर के लिए, इवेंट हैंडलर लिखने में आसानी होगी. ये ऐसे क्लिक का जवाब देते हैं जो उनके लिए अहम हैं. ऐसा करने के लिए, उन्हें खास तौर पर MouseEvent.button प्रॉपर्टी की जांच करने की ज़रूरत नहीं है.

फ़ॉल्स पॉज़िटिव को कम करें

जैसा कि हमने बताया है, auxclick बनाने का एक मकसद कस्टम click हैंडलर के डिप्लॉयमेंट से बचना था, जो गलती से "मिडल-क्लिक-ओपन-ए-टैब" व्यवहार को बदल देते हैं. उदाहरण के लिए, मान लें कि आपने एक click इवेंट हैंडलर लिखा है, जो लोकेशन बार को फिर से लिखने और कस्टम एक पेज के नेविगेशन को लागू करने के लिए, इतिहास एपीआई का इस्तेमाल करता है. वह कुछ ऐसा दिख सकता है:

document.querySelector('#my-link').addEventListener('click', event => {
    event.preventDefault();
    // ...call history.pushState(), use client-side rendering, etc....
});

जब माउस के मुख्य बटन से ट्रिगर होता है, तब कस्टम लॉजिक ठीक से काम कर सकता है. हालांकि, अगर बीच वाला बटन क्लिक करने पर वह कोड चलता है, तो यह फ़ॉल्स पॉज़िटिव है. इस नई सुविधा से पहले, नया टैब खोलने की डिफ़ॉल्ट कार्रवाई को रोक दिया जाएगा. हालांकि, यह काम उपयोगकर्ताओं की उम्मीदों के मुताबिक नहीं होता है. हालांकि, अपने हैंडलर की शुरुआत में event.button === 0 को साफ़ तौर पर देखा जा सकता है और कोड को सिर्फ़ तब लागू किया जा सकता है, जब ऐसा होता है, लेकिन उसे भूलना आसान होता है या आपको कभी लगता है कि ऐसा करना ज़रूरी नहीं है.

सिर्फ़ अपनी ज़रूरत के हिसाब से कोड चलाएं

कम फ़ॉल्स पॉज़िटिव का दूसरा पहलू यह है कि auxclick कॉलबैक सिर्फ़ तब चलेंगे, जब असल में नॉन-प्राइमरी माउस बटन पर क्लिक किया गया हो. अगर आपके पास कोई ऐसा कोड है जिसे नया टैब खोलने से पहले सही डेस्टिनेशन यूआरएल (विज्ञापन के लैंडिंग पेज का यूआरएल) का हिसाब लगाना ज़रूरी है, तो आपके पास auxclick सुनने और उसे अपने कॉलबैक में शामिल करने का विकल्प है. माउस के मुख्य बटन पर क्लिक करने पर, यह ऊपर से चलाया नहीं जाएगा.

ब्राउज़र समर्थन और संगतता

फ़िलहाल, यह नई सुविधा सिर्फ़ Chrome 55 में लागू की गई है. जैसा कि शुरुआती प्रस्ताव में बताया गया है, वेब डेवलपर कम्यूनिटी से मिले सुझाव, राय या शिकायत को अहमियत दी जाती है. इसमें सकारात्मक और नकारात्मक, दोनों तरह के सुझाव शामिल होते हैं. GitHub की समस्या दर्ज करना, स्टैंडर्ड तय करने की प्रोसेस पर काम कर रहे लोगों के साथ, अपने सुझाव शेयर करने का सबसे अच्छा तरीका है.

इस दौरान, डेवलपर को तब तक इंतज़ार नहीं करना पड़ेगा, जब तक auxclick, माउस इवेंट को हैंडल करने के सबसे सही तरीके अपनाता है. अपने click इवेंट हैंडलर की शुरुआत में MouseEvent.button प्रॉपर्टी की वैल्यू देखने के लिए समय निकालकर, सही कार्रवाई करें. नीचे दिया गया पैटर्न, प्राइमरी और सहायक क्लिक को अलग-अलग तरीके से हैंडल करेगा, चाहे auxclick के लिए नेटिव सहायता मौजूद हो या नहीं:

function handlePrimaryClick(event) {
    // ...code to handle the primary button click...
}

function handleAuxClick(event) {
    // ...code to handle the auxiliary button click….
}

document.querySelector('#my-link').addEventListener('click', event => {
    if (event.button === 0) {
    return handlePrimaryClick(event);
    }


    // This provides fallback behavior in browsers without auxclick.
    return handleAuxClick(event);
});

// Explicitly listen for auxclick in browsers that support it.
document.querySelector('#my-link').addEventListener('auxclick', handleAuxClick);