بسیاری از کاربران برای وب گردی از موبایل و تبلت خود استفاده می کنند. ما به عنوان توسعه دهنده باید مطمئن باشیم که رابط کاربری سایت مان در صفحه های لمسی به خوبی کار می کند . باتوجه به کاربرد هر عنصر می توان رویداد های hover وclick قرار داد اما این روش راه حل کاربر پسندی نیست.
خوشبختانه Api جدیدی منتشر شد که نیاز های ماوس، دستگاه های لمسی و قلمی را برآورده می کند، که رویداد Pointer نامیده می شود( با ویژگی های CSS همنام اشتباه گرفته نشود) و به توسعه دهندگان اجازه می دهد تا رویداد هایی برای اتفاق های مختلف اضافه کنند تا با انواع رویدادها به خوبی کار کنند.
رویدادهای جدید
Api جدید Pointer ورژن تکامل یافته ای از رابط کاربری Mouse Event است که تا به حال از این رابط استفاده می کردیم. این رابط عملکرد api قدیمی را گسترش داده و حرکات multi-touch ، ورودی دقیق قلم و به طور کلی فعل و انفعال صفحات لمسی حساس را پشتیبانی می کند.
- pointerdown – Pointer فعال می شود.
- pointerup – Pointer غیر فعال می شود.
- pointerover, pointerenter – Pointer وارد محدوده عنصر html می شود.
- pointerout, pointerleave – Pointer محدوده عنصر را ترک می کند.
- pointermove – Pointer تا زمانی که داخل محدوده عنصر است ، حرکت می کند.
- pointercancel – Pointer رویداد های دیگر را متوقف می کند، بطور مثال زمانی که دستگاه ورودی غیرفعال می شود.
- gotpointercapture – Pointer وارد حالت اولیه ورودی می شود، مثلا زمانی که عنصر متحرکی را drag می کند.
- lostpointercapture – Pointer از حالت gotpointercapture خارج می شود.
بسیاری از رویدادهای Pointer جایگزین های مستقیم رویداد های قبلی ماوس هستند. یکی از دستاورد های این api جدید پشتیبانی کامل مرورگر ها است که می توانیم این رویداد ها را مستقیما با جایگزین های جدید جابجا کنیم.
const button = document.querySelector("button");
// Instead of mouseover
button.addEventListener('mouseover', doSomething);
// We can use pointerover
button.addEventListener('pointerover', doSomething);
تعامل با ماوس باید در هر دو مورد، استفاده از انگشت یا قلم یکسان باشد. در هر صورت با این api جدید به راحتی می توان برنامه ریزی کرد.
تشخیص نوع ورودی
یکی از ویژگی های فوق العاده این api، این است که نوع دستگاهی که کاربر از آن استفاده می کند را تشخیص می دهد. این ویژگی زمانی مفید خواهد بود که بخواهیم برخی از متدهای دستگاه را محدود کنیم یا فیدبک مخصوصی را برای هر دستگاه ارائه کنیم.
button.addEventListener('pointereover', function(ev) {
switch (ev.pointerType) {
case 'mouse':
// The used device is a mouse or trackpad. break; case 'touch': // Input via touchscreen. break; case 'pen': // Stylus input. break; default: // Browser can't recognize the used device. break; }});ویژگی های دیگر
رابط کاربری رویداد های Pointer برخی ازاطلاعات جالب دیگری را نیز ارائه می دهد، که شامل ویژگی های مضاعف MouseEvent به شرح زیر می باشد:
- pointerId – ID منحصر به فردی برای pointer اختصاص می دهد.
- width و height – اندازه منطقه تماس (contact area) را با پیکسل به درست می آورد.
- pressure – میزان فشار در صفحات لمسی را اندازه می گیرد.
- tiltX و tiltY – زاویه قلمی را که صفحه را لمس می کند را اندازه می گیرد.
- isPrimary – تعیین می کند که یک رویداد چه زمانی توسط Pointer دستگاه دستگاه ورودی منتشر می شود.
پشتیبانی مرورگر ها
رویداد اشاره گر نسبتا جدید است، بنابراین سازگاری مرورگر هنوز کامل نیست.Chrome (دسکتاپ و موبایل)، Edge، IE و Opera پشتیبانی کامل دارند؛ فایرفاکس و سافاری پشتیبانی انجام نمی دهند.
برای بررسی اینکه آیا یک مرورگر دارای رویدادهای API شما است، می توانید از شیء window استفاده کنید:
if (window.PointerEvent) { // Pointer Events enabled.} else { // Pointer Events not supported}
گرچه هنوز مرورگرها به طور کامل پشتیبانی نمیکنند، API رویداد pointer در نهایت قصد دارد رویدادهای قدیمی ماوس را منتقل کند. این API ویژگی های زیادی را فراهم می کند که دسترسی به وب را افزایش می دهد و توسعه دهندگان را قادر می سازد تا اپپلیکشن های پیشرفته تری مبتنی بر قلم را ایجاد کنند.