کنترل ماوس و ورودی لمسی با رویدادهای API اشاره گرها

بخش: اسکریپت ها 93 بار مشاهده شده سه شنبه ۳۱ مرداد ۹۶ 0 نظر ارسال شده
کنترل ماوس و ورودی لمسی با رویدادهای API اشاره گرها

با استفاده روزافزون مردم از موبایل ها و تبلت ها برای وب گردی وظیفه ما به عنوان توسعه دهندگان باید از دسترسی لمسی کامل رابط وب اطمینان حاصل کنند. راه اندازی شنوندگان رویداد click و hover نوع کارها را طبقه بندی می کنند اما با این حال به وضوح یک راه حل باقی مانده از دوران ماوس باقی می ماند.

خوشبختانه، یک API جدید وجود دارد که نیازهای دستگاه های mouse (ماوس)، touch (لمسی) و stylus (قلم) را برآورده می کند. این رویدادها Pointer (اشاره گر) نامیده می شود (لطفا با خاصیت های CSS با همین نام اشتباه گرفته نشود) و به ما اجازه افزودن event listeners (شنوندگان رویداد) را که برای کار با تمام نوع های ورودی مناسب است را می دهد. 

با eventهای جدید آشنا شوید

رویداد جدید Pointer در API نسخه تکامل یافته از رابط رویداد mouse است که همه ما از آن استفاده کرده ایم. این رویداد قابلیت API قدیمی را گسترش داده و به طور کامل از حرکات multi-touch  ، ورودی precise pen (قلم دقیق) و تعامل با صفحه نمایش لمسی پشتیبانی می کند.

  • Pointerdown: اشاره گر فعال می شود.
  • Pointerup: اشاره گر را غیرفعال می نماید.
  • Pointerover، pointerenter: اشاره گر المان مرزها را وارد می کند.
  • Pointerout، pointerleave: اشاره گر المان از مرزها خارج می شود.
  • Pointermove: اشاره گر درون محدوده مرز المان حرکت می کند.
  • Pointercancel: نشانگر رویدادها را متوقف کرده است، برای مثال دستگاه ورودی غیرفعال شده است.
  • Gotpointercapture: اشاره گر حالت ورودی نشانگر را وارد کرده است، برای مثال کشیدن یک المان متحرک.
  • Lostpointercapture : حالت ضبط اشاره گر به پایان رسیده است.

اکثر رویدادهای اشاره گر در میان رویدادهای قدیمی ماوس جایگزینی مستقیم دارند. هنگامی که 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: شناسه منحصر به فرد برای نشانگر باعث این رویداد می شود.
  • width و height: اندازه منطقه تماس در پیکسل است.
  • pressure: در صورت موجود بودن، فشار لمس می باشد.
  • tiltX و tiltY: زاویه ای که یک قلم روی صفحه نمایش لمس می کند.
  • isPrimary: هدایت شدن رویداد توسط دستگاه اشاره گر اولیه را تعیین می کند.

Picture

در حالی که اندازه لمسی متفاوت است، کلیک های موس همیشه دارای عرض و ارتفاع 1 می باشند. 

pointer properties

 

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

رویداد اشاره گر نسبتا جدید بوده و در نتیجه سازگاری مرورگر هنوز کامل نمی باشد. Chrome (دسکتاپ و موبایل)، Edge، IE و Opera پشتیبانی کامل دارند؛ اما فایرفاکس و سافاری این کار را انجام نمی دهند.

pointer events browser support

می توانید از شیء window  برای بررسی اینکه آیا مرورگر دارای API Events Pointer می باشد، استفاده کنید:

if (window.PointerEvent) {
  // Pointer Events enabled.
} else {
  // Pointer Events not supported
}

یکی از محبوب ترین ابزارهای pollyfill منبع باز نیز برای کسانی که نمی خواهند برای کامل شدن مرورگرها صبر کنند، در دسترس است. 

 

نتیجه گیری

اگرچه Pointer Events API هنوز پشتیبانی کامل از مرورگر ندارد، اما در نهایت قصد دارد رویدادهای قدیمی ماوس را منتقل کند. این امر ویژگی های زیادی را فراهم می کند که دسترسی به وب را افزایش داده و توسعه دهندگان را قادر می سازد تا لمس ها و برنامه های مبتنی بر قلم پیشرفته تری را ایجاد کنند.

اگر میخواهید درباره API های Power Events بیشتر بدانید، توصیه می کنیم از این منابع استفاده نمایید:

گروه تحقیقات سافت اسکیل
گروه تحقیقات سافت اسکیل

گروه تحقیقات سافت اسکیل به منظور افزایش سطح دانش جامعه، سعی در ترجمه، تالیف و تولید محتوای با کیفیت در زمینه های مختلف نرم افزاری دارد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...