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

Jeff Posnick

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

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

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

फ़ॉल्स पॉज़िटिव को कम करना

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

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);