Sichqoncha hodisalari

Sichqoncha hodisalari nafaqat haqiqiy sichqoncha (mouse) uchun, balki sensorli ekranlar va planshetlar uchun ham ishlaydi — u yerda ular moslashtirilgan tarzda emulyatsiya qilinadi. Ushbu darsda sichqonchaning asosiy hodisalarini, ular qaysi tartibda yuzaga kelishini va har birida qanday ma'lumot borligini chuqur o'rganamiz.

Sichqonchaning asosiy hodisalari

Sichqoncha bilan bog'liq eng ko'p ishlatiladigan hodisalarni ikki guruhga bo'lish mumkin.

Oddiy hodisalar

• mousedown / mouseup — element ustida sichqoncha tugmasi bosildi / qo'yib yuborildi.
• mouseover / mouseout — sichqoncha kursori element ustiga keldi / undan chiqib ketdi.
• mousemove — element ustida sichqonchaning har bir harakati bu hodisani chaqiradi.
• click — bir xil element ustida mousedown, so'ng mouseup chap tugma bilan sodir bo'lgach ishga tushadi.
• dblclick — bir element ustida qisqa vaqt ichida ikki marta bosilganda ishga tushadi.
• contextmenu — o'ng tugma bosilganda ishga tushadi. Boshqa usullar bilan ham (masalan, klaviaturaning maxsus tugmasi) menyu chaqirilishi mumkin, shuning uchun bu aynan sichqoncha hodisasi emas.

Bu hodisalar orasida ikkitasi — click va dblclick — murakkab (composite) hodisalar, ya'ni ular boshqa oddiy hodisalar ketma-ketligidan tashkil topadi.

Hodisalar tartibi

Bir amal bir nechta hodisani yuzaga keltirishi mumkin. Masalan, chap tugmani bosish avval mousedownni (tugma pastga tushganda), so'ng mouseup va clickni (tugma yuqoriga qaytganda) chaqiradi.

Bitta amaldan bir nechta hodisa kelib chiqsa, ularning tartibi qat'iy belgilangan. Ya'ni ishlov beruvchilar (handler) quyidagi tartibda chaqiriladi: mousedown → mouseup → click.

Qaysi tugma bosildi: button

Sichqoncha bilan bog'liq hodisalarda qaysi tugma bosilganini bilish uchun event.button xossasi ishlatiladi. Odatda bu bizga click va contextmenu uchun kerak bo'lmaydi — chunki chap tugma clickni, o'ng tugma esa contextmenuni chaqiradi. Lekin mousedown va mouseup ishlov beruvchilarida bu zarur bo'lishi mumkin.

event.button ning mumkin bo'lgan qiymatlari:

• 0 — chap tugma (asosiy tugma).
• 1 — o'rta tugma (g'ildirak).
• 2 — o'ng tugma (ikkilamchi tugma).
• 3 — X1 tugmasi (odatda "orqaga" tugmasi).
• 4 — X2 tugmasi (odatda "oldinga" tugmasi).

Aksariyat sichqonchalarda faqat chap, o'ng va o'rta tugmalar mavjud, shuning uchun amalda 0, 1 va 2 qiymatlari eng ko'p ishlatiladi.

elem.onmousedown = function(event) {
  if (event.button === 0) {
    alert('Chap tugma bosildi');
  }
  if (event.button === 2) {
    alert('O'ng tugma bosildi');
  }
};

buttons xossasi

Bundan tashqari event.buttons xossasi ham bor — u ayni damda bosib turilgan barcha tugmalarni bit-maska (bitmask) sifatida saqlaydi. Chap tugma uchun 1, o'ng uchun 2, o'rta uchun 4. Bir vaqtning o'zida bir nechta tugma bosilsa, ularning yig'indisi qaytadi. Bu kamdan-kam ishlatiladi.

Koordinatalar: clientX/Y, pageX/Y

Barcha sichqoncha hodisalari ikki xil koordinata to'plamini beradi:

• Oynaga nisbatan (window-relative): clientX va clientY. Bular kursorning brauzer ko'rinadigan sohasi (viewport) yuqori chap burchagiga nisbatan koordinatalari. Sahifa skroll qilinsa ham ular o'zgarmaydi.
• Hujjatga nisbatan (document-relative): pageX va pageY. Bular butun hujjatning yuqori chap burchagiga nisbatan koordinatalar. Sahifa skroll qilinganda ular skroll miqdoriga qo'shiladi.

Masalan, agar oyna 500x500 o'lchamda bo'lib, kursor chap yuqori burchakda tursa, clientX va clientY ikkalasi ham 0 bo'ladi. Agar kursor markazda bo'lsa, ular 250 ni ko'rsatadi — sahifa qancha skroll qilingan bo'lishidan qat'i nazar.

elem.onmousemove = function(event) {
  console.log('Oynaga nisbatan: ' + event.clientX + ', ' + event.clientY);
  console.log('Hujjatga nisbatan: ' + event.pageX + ', ' + event.pageY);
};

Matn belgilanishini oldini olish

Sichqonchani ikki marta bosish ko'pincha matnni belgilaydi, bu esa interfeysga xalaqit berishi mumkin. Masalan, tugmada dblclick bo'lsa, tugma matni belgilanib qolishi mumkin. Buni oldini olish uchun brauzerning standart harakatini bekor qilamiz.

Muammo shundaki, matn belgilanishi mousedown paytida boshlanadi. Shuning uchun standart harakatni aynan mousedownda bekor qilish kerak:

<b ondblclick="alert('dblclick')" onmousedown="return false">
  Meni ikki marta bosing
</b>

Endi qalin (bold) matn ikki marta bosilganda belgilanmaydi, o'ng tugmani bosish esa CSS orqali ham nazorat qilinishi mumkin (user-select: none). Lekin ba'zan foydalanuvchi baribir matnni nusxalab olishi kerak bo'ladi, shuning uchun bu texnikadan ehtiyotkorlik bilan foydalaning.

Modifikator tugmalar: shift, alt, ctrl, meta

Barcha sichqoncha hodisalari qaysi "modifikator" (o'zgartiruvchi) tugmalari ushlab turilganini aks ettiruvchi mantiqiy (boolean) xossalarni o'z ichiga oladi:

• event.shiftKey — Shift tugmasi bosib turilganmi.
• event.altKey — Alt tugmasi (yoki Mac'da Opt).
• event.ctrlKey — Ctrl tugmasi.
• event.metaKey — Cmd tugmasi (Mac'da) yoki Win tugmasi (Windows'da).

Masalan, quyidagi tugma faqat Alt+Shift+bosish bilan ishlaydi:

button.onclick = function(event) {
  if (event.altKey && event.shiftKey) {
    alert('Yashasin, Alt+Shift+Bosish!');
  }
};

if (event.ctrlKey || event.metaKey) {
  // Windows/Linux'da Ctrl, Mac'da Cmd
}

Xulosa

Sichqoncha hodisalari quyidagi xossalarga ega:

• Tugma: event.button (0 — chap, 1 — o'rta, 2 — o'ng).
• Modifikator tugmalar: shiftKey, altKey, ctrlKey, metaKey.
• Koordinatalar: oynaga nisbatan clientX/clientY, hujjatga nisbatan pageX/pageY.

Bir amaldan bir nechta hodisa kelib chiqsa, ular qat'iy tartibda yuzaga keladi: mousedown → mouseup → click. Matn belgilanishini oldini olish uchun mousedownda standart harakatni bekor qiling.