بسیاری از کاربران  برای وب گردی از  موبایل و تبلت خود استفاده می کنند. ما به عنوان  توسعه دهنده باید مطمئن باشیم که رابط کاربری سایت مان در صفحه های لمسی به خوبی کار می کند . باتوجه به کاربرد هر عنصر می توان رویداد های 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 ویژگی های زیادی را فراهم می کند که دسترسی به وب را افزایش می دهد و توسعه دهندگان را قادر می سازد تا اپپلیکشن های پیشرفته تری مبتنی بر قلم را ایجاد کنند.