যখন একটি ক্লিক একটি click না? একটি জটিল ব্যবহারকারী ইন্টারফেসে কাজ করা একটি ওয়েব বিকাশকারীর জন্য, এটি একটি বিমূর্ত দার্শনিক প্রশ্ন নয়। আপনি যদি কাস্টম মাউস ইনপুট আচরণ বাস্তবায়ন করেন, তাহলে ব্যবহারকারীর অভিপ্রায়কে মাথায় রাখা গুরুত্বপূর্ণ। উদাহরণস্বরূপ, যদি একজন ব্যবহারকারী তাদের মাউসের মাঝের বোতাম দিয়ে একটি লিঙ্কে ক্লিক করেন, তাহলে অনুমান করা যুক্তিসঙ্গত যে তারা সেই লিঙ্কের বিষয়বস্তু সহ একটি নতুন ট্যাব খুলতে চেয়েছিল। যদি একজন ব্যবহারকারী একটি এলোমেলো UI উপাদানে মধ্য-ক্লিক করে, তাহলে আপনি অনুমান করতে পারেন যে এটি অসাবধানতাবশত ছিল এবং সেই ইনপুটটিকে উপেক্ষা করতে পারেন, যখন একটি প্রাথমিক বোতাম ক্লিক UI থেকে একটি প্রতিক্রিয়া ট্রিগার করবে বলে আশা করা হবে।
এটি সম্ভব, যদি একটু কষ্টকর হয়, একটি একক click ইভেন্ট শ্রোতার মাধ্যমে এই সূক্ষ্ম মিথস্ক্রিয়াগুলি মডেল করা। আপনাকে স্পষ্টভাবে MouseEvent button বৈশিষ্ট্যটি পরীক্ষা করতে হবে, এটি 0 তে সেট করা হয়েছে কিনা তা দেখতে, প্রাথমিক বোতামের প্রতিনিধিত্ব করে, অন্য কিছুর বিপরীতে, 1 সাধারণত মধ্যম বোতামের প্রতিনিধিত্ব করে এবং আরও অনেক কিছু। কিন্তু অনেক ডেভেলপার স্পষ্টভাবে button প্রপার্টি চেক করে না, যার ফলে কোন বোতাম টিপানো হোক না কেন, সমস্ত click একইভাবে পরিচালনা করে এমন কোডের দিকে নিয়ে যায়।
Chrome 55 দিয়ে শুরু করে, একটি নতুন ধরনের MouseEvent , যাকে বলা হয় auxclick , একটি অ-প্রাথমিক বোতামের সাহায্যে করা যেকোনো ক্লিকের প্রতিক্রিয়া হিসাবে গুলি করা হয়। এই নতুন ইভেন্টের সাথে click ইভেন্টের আচরণের একটি অনুরূপ পরিবর্তন: এটি শুধুমাত্র তখনই ফায়ার হবে যখন প্রাথমিক মাউস বোতাম টিপবে। আমরা আশা করি যে এই পরিবর্তনগুলি ওয়েব ডেভেলপারদের জন্য ইভেন্ট হ্যান্ডলার লিখতে সহজ করে তুলবে যেগুলি কেবলমাত্র MouseEvent.button প্রপার্টি চেক না করেই শুধুমাত্র তাদের পছন্দের ক্লিকের জন্য প্রতিক্রিয়া জানাবে৷
মিথ্যা ইতিবাচক হ্রাস
যেমন উল্লেখ করা হয়েছে, auxclick তৈরির একটি অনুপ্রেরণা ছিল কাস্টম click হ্যান্ডলারের স্থাপনা এড়ানো যা ভুলবশত "মিডল-ক্লিক-ওপেন-এ-ট্যাব" আচরণকে ওভাররাইড করে। উদাহরণ স্বরূপ, কল্পনা করুন যে আপনি একটি click ইভেন্ট হ্যান্ডলার লিখেছেন যা হিস্ট্রি API ব্যবহার করে লোকেশন বার পুনরায় লিখতে এবং কাস্টম একক-পৃষ্ঠা নেভিগেশন প্রয়োগ করে। এটি দেখতে এরকম কিছু হতে পারে:
document.querySelector('#my-link').addEventListener('click', event => {
event.preventDefault();
// ...call history.pushState(), use client-side rendering, etc....
});
আপনার কাস্টম লজিক মাউসের প্রাথমিক বোতাম দ্বারা ট্রিগার করার সময় উদ্দেশ্য হিসাবে কাজ করতে পারে, কিন্তু যদি একটি মধ্যম বোতামে ক্লিক করা হলে সেই কোডটি চলে, তবে এটি কার্যকরভাবে একটি মিথ্যা ইতিবাচক। নতুন আচরণের আগে, আপনি একটি নতুন ট্যাব খোলার ডিফল্ট অ্যাকশন রোধ করবেন, যা আপনার ব্যবহারকারীর প্রত্যাশার বিপরীতে চলে। যদিও আপনি স্পষ্টভাবে আপনার হ্যান্ডলারের শুরুতে event.button === 0 চেক করতে পারেন এবং কোডটি কার্যকর করতে পারেন যদি এটি হয় তবে এটি ভুলে যাওয়া সহজ, বা কখনই বুঝতে পারবেন না যে এটি করা প্রয়োজন।
শুধুমাত্র আপনার প্রয়োজনীয় কোড চালান
কম মিথ্যা ইতিবাচক দিকটি হল যে auxclick কলব্যাকগুলি কেবল তখনই চালানো হবে যখন প্রকৃতপক্ষে একটি অ-প্রাথমিক মাউস বোতাম ক্লিক করা হবে। যদি আপনার কাছে এমন কোড থাকে যার প্রয়োজন হয়, উদাহরণস্বরূপ, একটি নতুন ট্যাব খোলার আগে একটি উপযুক্ত গন্তব্য URL গণনা করা, আপনি auxclick শুনতে পারেন এবং সেই যুক্তিটিকে আপনার কলব্যাকে অন্তর্ভুক্ত করতে পারেন৷ প্রাথমিক মাউস বোতামটি ক্লিক করলে এটি চালানোর ওভারহেড বহন করবে না।
ব্রাউজার সমর্থন এবং সামঞ্জস্য
এই নতুন আচরণ বর্তমানে শুধুমাত্র Chrome 55-এ প্রয়োগ করা হয়েছে। প্রাথমিক প্রস্তাবে উল্লিখিত হিসাবে, ওয়েব ডেভেলপার সম্প্রদায়ের প্রতিক্রিয়া (ইতিবাচক এবং নেতিবাচক উভয়ই) প্রশংসা করা হয়। একটি গিটহাব ইস্যু ফাইল করা হল সেই মতামত শেয়ার করার সর্বোত্তম উপায় যারা স্ট্যান্ডার্ডাইজেশন প্রক্রিয়াতে কাজ করছেন।
ইতিমধ্যে, মাউস ইভেন্টগুলি পরিচালনা করার জন্য কিছু সর্বোত্তম অনুশীলন অনুসরণ করতে বিকাশকারীদেরকে 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);