Події mousedown, mouseup і click
Коли користувач клацає на елемент, то спрацьовує не менше ніж 3 події миші в такому порядку:
- mousedown. користувач натиснув кнопку миші на елементі
- mouseup. користувач відпустив кнопку миші на елементі
- click. виявлені події mousedown і mouseup на елементі
В основному події mousedown і mouseup корисніші ніж click. Іноді користувач клікає мишкою, але подія click не спрацьовує.
Так чи інакше, ця проблема виникає тільки якщо Ви самі цього захочете Ви повинні зареєструвати обробники подій onmousedown / up. але в більшості випадків вистачає події click.
Пам'ятайте, що якщо ви використовуєте alert'и, то браузер може заплутатися і втратити порядок виконуються подій і кількість їх викликів.
Подія dblclick (подвійний клік)
Подія dblclick використовується набагато рідше всіх інших подій миші. Якщо Ви все-таки використовуєте його, переконайтеся в тому, що не використовуєте обробники подій onclick і ondblclick для одного і того ж HTML елемента. Визначити що зробив користувач практично неможливо в такому випадку.
Коли користувач робить подвійний клік на елементі спочатку спрацьовує подія click і тільки потім dblclick. Використання alert повідомлень тут також вкрай небезпечно.
Mousemove подія
Подія mousemove працює нормально, але Ви повинні пам'ятати, що обробка такого роду подій може займати кілька часу. Подія mousemove спрацьовує коли користувач пересуває курсор миші на один піксель. Здавалося б нічого особливого не відбувається, але всередині є складні функції, процес виконання яких займає тривалий проміжок часу. Це може привести до нестабільної роботи сайту. Тому краще всього використовувати обробник події onmousemove. тільки там, де це дійсно потрібно, і обов'язково видаляти його в майбутньому.
Mouseover і mouseout події
Давайте розглянемо невеликий приклад. Спробуйте поводити курсор мишки поверх елементів з різним фоном. Елемент 1 повинен злегка блимати при наведенні на нього курсором - це спрацьовує подія mouseover.
Проте, як Ви бачите, ця подія спрацьовує і при наведенні курcора миші на елемент№2 і навіть span.
Причина такого поводження в тому, що подія встановлене на перший елементи також застосовується до його дочірнім Нодаме. Все гранично ясно, але проблема виникає тоді, коли нам треба зробити якусь дію при переході курсору мишки, наприклад, від елемента span до елементу№2.
"Звідки прийшла миша?" або властивості relatedTarget, fromElement і toElement
Хлопці з W3C додали властивість relatedTarget для подій mouseover і mouseout. Властивість містить в собі елемент від якого прийшов курсор мишки в разі mouseover і елемент до якого перейшла миша в разі mouseout.
Microsoft створили два ствойства щоб зберігати цю інформацію:
- fromElement - відноситься до елементу від якого прийшла миша.
- toElement - до елементу до якого прийшла миша.
кросбраузерності код
І так якщо Ви хочете знати звідки прийшла мишка використовуючи подія mouseover. іпользуются наступний скрипт:
У разі ипользования події mouseout (елемент, до якого рухається курсор):
Mouseenter і mouseleave
Microsoft пропонує інший спосіб вирішення проблеми. Вони створили 2 нових події mouseenter і mouseleave. Ці події мають таку ж поведінку як mouseover і mouseout. Єдино відмінність - це те, що події не "перестрибують" на дочірні елементи. Це дуже добре вирішує нашу проблему, представлену в прикладі.