auxclick به کروم 55 می آید

Jeff Posnick

چه زمانی یک کلیک یک click نیست؟ برای یک توسعه دهنده وب که روی یک رابط کاربری پیچیده کار می کند، این یک سوال فلسفی انتزاعی نیست. اگر رفتار ورودی ماوس سفارشی را پیاده سازی می کنید، مهم است که نیت کاربر را در ذهن داشته باشید. برای مثال، اگر کاربر با دکمه وسط ماوس روی پیوندی کلیک کند، منطقی است که فرض کنیم می‌خواهد یک برگه جدید با محتوای آن پیوند باز کند. اگر کاربر روی یک عنصر UI تصادفی کلیک وسط می‌کند، ممکن است بخواهید فرض کنید که این عنصر سهوی بوده است، و آن ورودی را نادیده بگیرید، در حالی که انتظار می‌رود کلیک دکمه اصلی پاسخی را از UI ایجاد کند.

اگر کمی دست و پا گیر باشد، می توان این تعاملات ظریف را از طریق شنونده رویداد یک click مدل کرد. شما باید به صراحت ویژگی button MouseEvent را بررسی کنید تا ببینید آیا روی 0 تنظیم شده است، که نشان دهنده دکمه اصلی است، در مقابل هر چیز دیگری، با 1 معمولاً نشان دهنده دکمه میانی، و غیره. اما بسیاری از توسعه‌دهندگان به اندازه‌ی بررسی صریح ویژگی button پیش نمی‌روند، که منجر به کدهایی می‌شود که همه click را یکسان، بدون توجه به اینکه کدام دکمه فشار داده شده است، مدیریت می‌کند.

با شروع Chrome 55، نوع جدیدی از MouseEvent ، به نام auxclick ، در پاسخ به هر کلیکی که با یک دکمه غیراصلی انجام می‌شود، فعال می‌شود. همراه با این رویداد جدید یک تغییر مربوطه در رفتار رویداد 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 فقط زمانی اجرا می‌شوند که در واقع یک دکمه غیراصلی ماوس کلیک شده باشد. اگر کدی دارید که مثلاً باید قبل از باز کردن یک برگه جدید، URL مقصد مناسب را محاسبه کند، می‌توانید به auxclick گوش دهید و آن منطق را در پاسخ به تماس خود بگنجانید. هنگامی که دکمه اصلی ماوس کلیک می شود، هزینه اجرای آن متحمل نمی شود.

پشتیبانی و سازگاری مرورگر

این رفتار جدید در حال حاضر فقط در Chrome 55 پیاده‌سازی شده است. همانطور که در پیشنهاد اولیه ذکر شد، بازخورد (هم مثبت و هم منفی) از جامعه توسعه‌دهندگان وب قابل قدردانی است. ثبت یک مشکل GitHub بهترین راه برای به اشتراک گذاشتن آن بازخورد با افرادی است که روی فرآیند استانداردسازی کار می کنند.

در این میان، توسعه دهندگان برای پیروی از بهترین شیوه ها برای مدیریت رویدادهای ماوس، مجبور نیستند منتظر بمانند تا auxclick به طور گسترده در دسترس باشد. اگر برای بررسی مقدار ویژگی MouseEvent.button در شروع کنترل رویداد click خود وقت بگذارید، می توانید اطمینان حاصل کنید که اقدام مناسب را انجام می دهید. الگوی زیر با کلیک‌های اولیه و کمکی متفاوت برخورد می‌کند، چه پشتیبانی اصلی برای 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);