Pointer Events API

Hodisa tiplari

Pointer hodisasi nomlari sichqoncha hodisalariga o‘xshaydi.

Shunchaki "mouse" so‘zini "pointer" bilan almashtiring:

• pointerdown
  Ko‘rsatkich faollashganda ishga tushadi (tugma bosilganda, jismoniy tegish sodir bo‘lganda).

• pointerup
  Ko‘rsatkich faol bo‘lmay qolganda ishga tushadi (tugma qo‘yib yuborilganda, tegish tugaganda).

• pointermove
  Ko‘rsatkich koordinatalari o‘zgarganda ishga tushadi.

• pointerover Ko‘rsatkich elementga o‘tkazilganda ishga tushadi.
• pointerout Ko‘rsatkich elementdan tashqariga chiqqanda ishga tushadi.
• pointerenter Pointeroverga o‘xshaydi, lekin DOM ierarxiyasidan o‘tmaydi.

• pointerleave
  pointerout’ga o‘xshaydi, lekin yuqoriga ko‘tarilmaydi (bubble qilmaydi).

• pointercancel Tizim ko‘rsatgich bilan o‘zaro ta’sirini bekor qilganda ishga tushiriladi (OT tizim menyusini ochishi bilan to‘xtatiladi).

Hodisa xususiyatlari

PointerEvent interfeysi MouseEvent xususiyatlarini meros qilib oladi va o‘ziga xoslarini qo‘shadi:

• pointerId Har bir ko‘rsatgich uchun noyob identifikator, ko‘p teginish stsenariylarida kuzatish imkonini beradi.

• pointerType
  Qurilma turini bildiruvchi string: "mouse", "pen" yoki "touch".

• isPrimary
  Asosiy ko‘rsatkich uchun true bo‘ladigan mantiqiy qiymat (multi-touch’dagi birinchi barmoq).

• pressure
  Ko‘rsatkich tomonidan qo‘llanilgan bosimni bildiruvchi normallashtirilgan qiymat (0 dan 1 gacha).

Pointer Events API afzalliklari

Dasturchilar bir nechta kiritish turlarida ishlaydigan yagona hodisa tinglovchilari to‘plamini (yagona model) yozishlari mumkin, bu esa kod takrorlanishi va murakkabligini kamaytiradi.

Standart sichqoncha hodisasi xususiyatlaridan tashqari (mijoz koordinatalari kabi), PointerEvent obyektlari bosim, tiltX, tiltY, kenglik va balandlik kabi boshqa kirishlarga xos yangi xususiyatlarni o‘z ichiga oladi (qalam va teginish o‘zaro ta’siri uchun foydali).

setPointerCapture() kabi metodlar ko‘rsatkich element chegarasidan tashqariga chiqqanda ham elementga pointer hodisalarini qabul qilish imkonini beradi (siljitish yoki sudrash uchun foydali).

An’anaviy sichqoncha hodisalaridan farqli o‘laroq, API bir vaqtdagi bir nechta tegish nuqtalarini kuzata oladi.

CSS pointer-events xususiyati

pointer-events CSS xususiyati alohida xususiyat bo‘lib, uni boshqaradi yoki element har qanday ko‘rsatkich o‘zaro ta’sirining maqsadi bo‘lishi mumkin emas.

CSS-dagi style="pointer-events: none; barcha sichqonchani o‘chiradi va HTML elementi va uning avlodlaridagi teginish o‘zaro ta’siri.

CSS-dagi style="pointer-events: auto;" standart xatti-harakatni tiklaydi.

Ushbu CSS xususiyati qatlamli interfeyslarni yaratish yoki asosiy JavaScript mantig‘ini o‘zgartirmasdan muayyan elementlardagi o‘zaro ta’sirlarni vaqtincha o‘chirish uchun foydalidir.