Mousedown, faceți clic pe mouse și faceți clic pe evenimente
Când un utilizator dă clic pe un element, sunt declanșate cel puțin 3 evenimente ale mouse-ului în această ordine:
- mousedown. utilizatorul a dat clic pe element
- MouseUp. utilizatorul a lansat butonul mouse-ului pe element
- click. evenimentele de întâlnire și mouseup sunt detectate pe element
Practic, evenimentele cu mouse-ul și mouse-ul sunt mai utile decât clicul. Uneori utilizatorul face clic pe mouse, dar evenimentul de clic nu funcționează.
În orice caz, această problemă apare numai dacă doriți ea însăși. Trebuie să înregistrați procesanții evenimentului onmousedown / up. dar în majoritatea cazurilor există un eveniment de clic.
Rețineți că, dacă folosiți alerte, browserul poate deveni confuz și poate pierde ordinea evenimentelor care rulează și numărul apelurilor acestora.
Evenimentul Dblclick (faceți dublu clic)
Evenimentul dblclick este folosit mult mai rar decât toate celelalte evenimente ale mouse-ului. Dacă îl utilizați în continuare, asigurați-vă că nu utilizați dispozitive de tratare a evenimentelor onclick și ondblclick pentru același element HTML. Determinați ce a făcut utilizatorul este aproape imposibil în acest caz.
Când un utilizator face dublu clic pe un element, evenimentul clic este declanșat mai întâi și numai apoi dblclick. Utilizarea mesajelor de avertizare aici este, de asemenea, extrem de periculoasă.
Evenimentul Mousemove
Evenimentul mousemove funcționează bine, dar trebuie să vă amintiți că procesarea unor astfel de evenimente poate dura ceva timp. Evenimentul mousemove este declanșat atunci când utilizatorul mută cursorul mouse-ului la un pixel. Se pare că nu se întâmplă nimic special, dar în interiorul său există funcții complexe, proces care durează mult timp. Acest lucru poate duce la funcționarea instabilă a site-ului. Prin urmare, este mai bine să utilizați un handler de evenimente onmousemove. numai în cazul în care acest lucru este cu adevărat necesar și este absolut necesar să îl ștergeți în viitor.
Mouseover și mouseout evenimente
Să ne uităm la un exemplu mic. Încercați să mutați cursorul mouse-ului peste elementele cu un fundal diferit. Elementul 1 ar trebui să lumineze ușor atunci când treceți cu mouse-ul pe cursorul mouse-ului - aceasta declanșează evenimentul mouseover.
Cu toate acestea, după cum puteți vedea, acest eveniment este declanșat atunci când cursorul mouse-ului este mutat la elementul # 2 și chiar se întinde.
Motivul pentru acest comportament este că evenimentul setat la primul element se aplică și nodurilor sale copil. Totul este foarte clar, însă problema apare atunci când trebuie să efectuăm o anumită acțiune atunci când deplasează cursorul mouse-ului, de exemplu, de la span la elementul # 2.
"De unde a venit mouse-ul?" sau proprietatea relatedTarget, de laElement și toElement
Persoanele W3C au adăugat proprietatea relatedTarget pentru evenimentele mouseover și mouseout. Proprietatea conține elementul din care a apărut cursorul mouse-ului în cazul mouseover și elementul la care mouse-ul a trecut în cazul mouseout.
Microsoft a creat două proprietăți pentru a stoca aceste informații:
- fromElement - se referă la elementul din care a venit mouse-ul.
- toElement - la elementul la care a venit mouse-ul.
Cod de browser încrucișat
Și dacă doriți să știți de unde a venit mouse-ul de la utilizarea evenimentului mouseover. Utilizați următorul script:
În cazul utilizării evenimentului mouseout (elementul la care se mișcă cursorul):
Mouse-ul și mouseleave
Microsoft oferă o modalitate diferită de a rezolva problema. Au creat 2 evenimente mousenewre și mouseleave noi. Aceste evenimente au același comportament ca mouseover și mouseout. Singura diferență este că evenimentele nu "sare" peste copii. Acest lucru ne rezolvă foarte bine problema în exemplul respectiv.