قابلیت های دستگاه ورودی

Paul Kinlan

Chrome 47 دارای ویژگی جدیدی است که درک نحوه تعامل کاربران با سایت شما را آسان‌تر می‌کند: InputDeviceCapabilities ! بیایید کمی به عقب برگردیم و یاد بگیریم که چرا این مهم است.

رویدادهای ورودی DOM انتزاعی بالاتر از رویدادهای ورودی سطح پایین هستند که به طور آزاد با ورودی فیزیکی دستگاه مرتبط هستند (مثلاً رویدادهای click را می توان با ماوس، صفحه لمسی یا صفحه کلید اجرا کرد). با این حال، یک مشکل وجود دارد: هیچ روش ساده ای برای به دست آوردن جزئیات دستگاه فیزیکی مسئول یک رویداد وجود ندارد.

علاوه بر این، انواع خاصی از ورودی می‌توانند رویدادهای ورودی DOM «جعلی» بیشتری را به دلایل سازگاری ایجاد کنند. یکی از این رویدادهای DOM جعلی زمانی اتفاق می‌افتد که کاربر روی صفحه لمسی (مانند تلفن همراه) ضربه می‌زند. نه تنها رویدادهای لمسی را فعال می کند، بلکه به دلایل سازگاری، رویدادهای ماوس را نیز فعال می کند.

این باعث ایجاد مشکلاتی برای توسعه دهندگان در هنگام پشتیبانی از ورودی ماوس و لمسی می شود. دشوار است بدانید که آیا یک رویداد mousedown در واقع ورودی جدید یک ماوس را نشان می دهد یا فقط یک رویداد سازگاری برای یک رویداد شروع لمسی است که قبلا پردازش شده است.

InputDeviceCapabilities API جدید جزئیاتی را در مورد منابع اصلی رویدادهای ورودی از طریق یک شی sourceCapabilities در UIEvent ارائه می دهد.
شی دارای ویژگی firesTouchEvents است که بر اساس نحوه ایجاد رویداد توسط عملکرد کاربر، روی true یا false تنظیم می شود.

سوال این است: کجا باید از این استفاده کرد؟

خارج از Pointer Events، امروزه بسیاری از توسعه‌دهندگان منطق تعامل در لایه لمسی را مدیریت می‌کنند و از پیش‌فرض جلوگیری می‌کنند تا از ایجاد رویدادهای «جعلی» ماوس در وهله اول جلوگیری کنند. این طراحی در بسیاری از سناریوها به خوبی کار می‌کند و نیازی به تغییر ندارد. مزیت قابلیت های InputDevice.

اما در برخی سناریوها واقعاً نمی‌خواهید از پیش‌فرض رویداد لمسی جلوگیری کنید. برای مثال، شما همچنان می خواهید ضربه بزنید تا رویدادهای «کلیک» را ارسال کنید و تمرکز را تغییر دهید. برای این موارد، اطلاعات نگهداری شده در ویژگی MouseEvent.sourceCapabilities.firesTouchEvents به شما امکان می دهد منطق رویدادهای لمسی و مبتنی بر ماوس را در مدلی ادغام کنید که شبیه به نحوه مدیریت منطق با رویدادهای اشاره گر است. یعنی می‌توانید فقط یک مجموعه کد داشته باشید که منطق تعامل را مدیریت می‌کند و به توسعه‌دهندگان راه ساده‌تری برای اشتراک‌گذاری منطق بین مرورگرهایی که رویدادهای اشاره‌گر را پشتیبانی می‌کنند یا نمی‌کنند، ارائه می‌دهد.

function addMouseEventListener(target, type, handler, capture) {  
    target.addEventListener(type, function(e) {  
    if (e.sourceCapabilities.firesTouchEvents)  
        return false;  
    return handler(e);  
    }, capture);  
}

خبر خوب این است که این مورد توسط Rick Byers به ​​صورت Polyfill شده است تا بتوانید از آن در اکثر سیستم عامل ها استفاده کنید.

امروزه این API حداقل است و بر حل یک مشکل خاص با شناسایی رویدادهای ماوس ناشی از رویدادهای لمسی متمرکز است. حتی می توان نمونه ای از InputDeviceCapabilities را نمونه برداری کرد. با این حال، فقط حاوی firesTouchEvents است. در آینده انتظار می رود که گسترش یابد تا شما را قادر سازد تا اطلاعات بیشتری در مورد همه دستگاه های ورودی در سیستم کاربر داشته باشید. ما دوست داریم نظرات شما را در مورد موارد استفاده دریافت کنیم.