MohirDox

Ko'rinishi

Pointer Events API ​

Pointer Events API — bu sichqoncha, stilus (ruchka) va sensorli ekran (barmoq) kabi turli xil kiritish qurilmalari uchun yagona kiritish modelini taqdim etuvchi zamonaviy veb-standartdir.

U sichqoncha va sensorli hodisalarning alohida modellarini yagona, apparatdan mustaqil tizimga birlashtirish orqali ishlab chiqishni soddalashtiradi.

Eslatma

Zamonaviy veb uchun pointer hodisalari apparatdan qat'i nazar barcha foydalanuvchilar uchun izchil tajribani ta'minlaydigan interaktiv interfeyslarni yaratishda tavsiya etilgan yondashuv hisoblanadi.

Hodisa turlari ​

Pointer hodisalarining nomlari sichqoncha hodisalariga (mouse events) o'xshash. Shunchaki "mouse" so'zini "pointer" bilan almashtiring:

  • pointerdown — Pointer faol bo'lganda (tugma bosilganda, jismoniy aloqa o'rnatilganda) ishga tushadi.
  • pointerup — Pointer boshqa faol bo'lmaganda (tugma qo'yib yuborilganda, aloqa tugaganda) ishga tushadi.
  • pointermove — Pointer koordinatalari o'zgarganda ishga tushadi.
  • pointerover — Pointer element ichiga kirganda ishga tushadi.
  • pointerout — Pointer elementdan tashqariga chiqqanda ishga tushadi.
  • pointerenter — pointerover-ga o'xshash, lekin DOM ierarxiyasi bo'ylab yuqoriga chiqmaydi (bubbling yo'q).
  • pointerleave — pointerout-ga o'xshash, lekin yuqoriga chiqmaydi.
  • pointercancel — Tizim pointer bilan aloqani bekor qilganda (masalan, OS menyusi ochilishi natijasida) ishga tushadi.

Hodisa xususiyatlari ​

PointerEvent interfeysi MouseEvent-dan xususiyatlarni meros qilib oladi va unga maxsuslarini qo'shadi:

  • pointerId — Har bir pointer uchun noyob ID, ko'p barmoqli (multi-touch) holatlarni kuzatish imkonini beradi.
  • pointerType — Qurilma turini ko'rsatuvchi matn: "mouse", "pen" yoki "touch".
  • isPrimary — Birinchi (asosiy) pointer uchun true qiymat (multi-touch-dagi birinchi barmoq kabi).
  • pressure — Pointer orqali amalga oshirilayotgan bosim kuchi (0 dan 1 gacha bo'lgan qiymat).

Pointer Events API afzalliklari ​

Ishlab chiquvchilar bir nechta kiritish turlarida ishlaydigan bitta hodisa tinglovchilar to'plamini (yagona model) yaratishi mumkin, bu esa kodning takrorlanishi va murakkabligini kamaytiradi.

Standart sichqoncha hodisalari xususiyatlaridan tashqari, PointerEvent obyektlari boshqa dushish qurilmalariga xos bo'lgan yangi xususiyatlarni (bosim, tiltX, tiltY, kenglik va balandlik) o'z ichiga oladi (bu stilus va sensorli kiritishlar uchun foydali).

setPointerCapture() kabi metodlar pointer element chegarasidan tashqariga chiqqanda ham elementning pointer hodisalarini qabul qilishiga imkon beradi (bu surish yoki sudrab o'tish kabi amallar uchun foydali).

API an'anaviy sichqoncha hodisalaridan farqli o'laroq, bir vaqtdagi bir nechta teginish nuqtalarini kuzatishi mumkin.

CSS pointer-events xususiyati ​

pointer-events CSS xususiyati elementning pointer hodisalari uchun nishon bo'la olish yoki olmasligini boshqaradigan alohida xususiyatdir.

  • CSS-dagi style="pointer-events: none;" HTML elementi va uning avlodlarida barcha sichqoncha va sensorli harakatlarni o'chirib qo'yadi.
  • CSS-dagi style="pointer-events: auto;" standart holatni tiklaydi.

Ushbu CSS xususiyati qatlamli interfeyslarni yaratishda yoki ichki JavaScript mantiqini o'zgartirmasdan ma'lum elementlarda harakatlarni vaqtincha to'xtatib turishda foydalidir.