În acest capitol vom înțelege mai profund lista de evenimente mouse-ului, ia în considerare proprietățile lor generale, precum și evenimentele care sunt asociate cu un clic.
Evenimentele pot fi împărțite în două tipuri: „simplu“ și „complex“.
MouseDown butonul mouse-ului este apăsat deasupra unui element. Butonul MouseUp mouse-ului este eliberat deasupra unui element. mouseover mouse-ul a apărut deasupra elementului. Mouse-ul mouseout părăsit de elementul. mousemove Fiecare mișcare mouse-ul peste elementul generează evenimentul.
click apelat atunci când faceți clic pe mouse-ul, care este, atunci când MouseDown. și apoi MouseUp un element de ContextMenu apelat atunci când faceți clic pe butonul din dreapta al mouse-ului pe un element. dblclick sunat când dublu-clic pe element.
Complexul poate fi compus din simplu, astfel încât, în teorie, s-ar putea face fără ele. Dar ei sunt acolo, și asta e bine, pentru că este mai convenabil pentru ei.
O acțiune poate provoca mai multe evenimente.
De exemplu, CPC-ul este primul mousedown atunci când este apăsat, apoi MouseUp și faceți clic atunci când butonul este eliberat.
În cazurile în care o acțiune unică generează mai multe evenimente, ordinea lor este fixat. Aceasta este, manipulatorii va fi numit la comanda mousedown → → MouseUp clic.
Click pe butonul de mai jos și veți vedea evenimentele care au loc în același timp. Încercați, de asemenea, dublu clic.
La testul de mai jos reprezintă sunt înregistrate toate evenimentele mouse-ului, iar în cazul în care evenimentul are loc între mai mult de 1 secundă, au separat pentru linia lizibilitate. De asemenea, sunt prezente proprietățile care / buton. care poate determina butonul mouse-ului. Noi le considerăm în continuare.
Fiecare eveniment este manipulat în mod independent.
De exemplu, pe MouseUp + clic evenimente au loc simultan, dar procesate secvențial. În primul rând MouseUp finalizat complet de procesare. apoi executați clic pe.
La procesarea evenimentelor legate de clicuri de mouse-ul, este important să se știe care buton este apăsat.
Pentru butonul mouse-ului în obiectul eveniment care are o proprietate.
În practică, este rar folosit, deoarece de obicei agățate handler sau onclick - doar butonul mouse-ului stânga sau oncontextmenu - doar dreapta.
Valorile posibile sunt:
- == event.which 1 - Buton stânga
- == event.which 2 - butonul din mijloc
- == event.which 3 - Buton dreapta
Această proprietate nu este acceptat IE8-, dar poate fi obținut în modul descris la sfârșitul capitolului.
Acest eveniment este declanșat atunci când faceți clic pe butonul din dreapta al mouse-ului:
Făcând clic pe butonul de mai sus, după tratare a oncontextmenu va afișa meniul contextual obișnuit, care arată întotdeauna browser-ul atunci când faceți clic pe butonul din dreapta. Aceasta este acțiunea implicită.
Dacă nu doriți să afișați meniul de built-in, de exemplu, pentru că arată sale specifice aplicației noastre, puteți suprascrie acțiunea implicită.
In exemplul de mai jos meniul încorporat nu vor fi afișate:
Toate evenimentele mouse-ul conține informații despre Key-modificator.
De exemplu, butoanele de mai jos va funcționa doar pe Alt + Shift + clic pe:
Notă: pe un Mac folosit în loc de Ctrl Cmd
Pe computerele care rulează Windows și Linux, există o tastă specială Alt. Shift și Ctrl. Pe Mac, există o altă tastă specială: Cmd. care corespunde metaKey de proprietate.
În cele mai multe cazuri în care un Windows / Linux folosesc Ctrl. pe un Mac folosind Cmd. În cazul în care apasă un utilizator Windows Ctrl + Enter sau utilizator Ctrl + A. Mac apasă Cmd + Enter sau Cmd + A. și așa mai departe, aproape întotdeauna Cmd în loc de Ctrl.
Prin urmare, dacă dorim să ne menținem combinația Ctrl + clic sau altele asemenea, atunci Mac are sens să utilizeze Cmd + clic. Utilizatorii de Mac va fi mult mai confortabil.
Mai mult decât atât, chiar dacă ne-ar dori să-l facă utilizatorii de Mac utilizați Ctrl + click - ar fi fost dificil. Faptul că de obicei faceți clic pe Ctrl + trageți pe un Mac funcționează ca clic dreapta și generează oncontextmenu eveniment. mai degrabă decât onclick. atât sub Windows / Linux.
Decizia - pentru utilizatorii de ambele sisteme de operare funcționează cu confort, asociat cu ctrlKey trebuie utilizat metaKey.
JS-cod, acest lucru înseamnă că trebuie să verificați dacă (event.ctrlKey || event.metaKey) pentru comoditatea utilizatorilor de Mac.
Toate evenimentele mouse-ul oferă coordonatele curente ale cursorului în două moduri: în ceea ce privește fereastra și în raport cu documentul.
Proprietăți de cuplu clientX / clientY conține coordonatele cursorului în raport cu fereastra curentă.
În acest caz, de exemplu, în cazul în care dimensiunea ecranului 500x500, iar mouse-ul este în centru, apoi clientX clientY și va fi egală cu 250.
Este posibil într-un fel de a defila, dar dacă nu se deplasează cu mouse-ul, cursorul coordonatele clientX / clientY nu se va schimba, deoarece acestea sunt considerate a fi în raport cu fereastra, nu documentul.
Trageți mouse-ul peste caseta de text pentru a vedea clientX / clientY:
În același sistem de coordonate și funcționează elem.getBoundingClientRect metoda (). returnează coordonatele elementului și poziția: fixe.
coordonatele cursorului pe document sunt proprietatile PaginaX / PaginaY.
Din moment ce aceste coordonate - în ceea ce privește nodul din stânga-sus al documentului, nu fereastra, ele permit derularea. Dacă derulați pagina, și nu atingeți mouse-ul, cursorul coordonatele PaginaX / PaginaY schimba cantitatea de parcurgere acestea sunt legate de un anumit punct în document.
În IE8- aceste proprietăți nu au, dar le puteți obține în modul descris la sfârșitul capitolului.
Trageți mouse-ul peste caseta de text pentru a vedea PaginaX / PaginaY (cu excepția IE8-):
În același coordona poziția sistemului de lucru: absolut. în cazul în care un element este poziționat în raport cu documentul.
Rupestru: x, y, layerX, layerY
Unele browsere suporta proprietăți event.x / y. event.layerX / layerY.
Aceste proprietăți sunt depășite, non-standard și nu adaugă nimic la cele de mai sus. Utilizați-le nu este necesar.
Toate browserele cu excepția IE8-, de a genera dblclick în plus față de alte evenimente.
- mousedown (apăsat)
- MouseUp + clic (apăsat)
- mousedown (apăsat)
- MouseUp + clic + dblclick (apăsat).
în al doilea rând clica IE8- nu generează mousedown și faceți clic.
- mousedown (apăsat)
- MouseUp + clic (apăsat)
- (Apăsat a doua oară, fără eveniment)
- mouseup + dblclick (apăsat).
Prin urmare, pentru a prinde un dublu clic în IE8-, de urmărire doar faceți clic. nu se poate, pentru că a doua oară când îl apăsați nu este. Ar trebui să fie exact evenimentul dblclick.
În vechiul IE8- care nu a fost susținută de proprietate. dar în schimb folosit butonul de proprietate. care este un număr de 3 biți în care fiecare bit corespunde unui buton al mouse-ului. Bit este setat la 1 doar dacă este apăsat butonul corespunzător.
Pentru a-l decripta - au nevoie de o operație de biți ( "Bit I"):
- . (butonul 1) == true (primul bit este setat), în cazul în care butonul din stânga este apăsat,
- . (butonul 2) == true (al 2-lea bit este setat), dacă este apăsat butonul din dreapta,
- . (butonul 4) == true (set de biți treia), în cazul în care este apăsat butonul central.
Ceea ce este interesant, în acest caz, putem afla dacă cele două butoane sunt apăsate în același timp, în timp ce standardul pe care o astfel de posibilitate nu. Deci, într-un sens, caracteristică buton - mai puternic.
Este ușor de a face o funcție care va pune out proprietate pe care buton. în cazul în care nu este:
În IE la versiunea 9 nu este suportată proprietăți PaginaX / PaginaY. dar le puteți obține, adăugând la clientX / clientY-dimensiunea paginii defilare.
Pentru mai multe informații despre calcularea acestuia puteți citi în pagina de derulare.
Prezentăm aici o opțiune gata, care ne permite să obțineți PaginaX / PaginaY pentru vechi și foarte vechi IE:
eveniment mouse-ul are următoarele proprietăți:
- Butonul mouse-ului: care (pentru IE8-: ar trebui să fie pus în afara butonului)
- Elementul care a ridicat evenimentul: țintă
- Coordonate în raport cu fereastra: clientX / clientY
- Coordonate în raport cu documentul: PaginaX / PaginaY (pentru IE8-: aveți nevoie pentru a pune pe clientX / Y și defilare)
- Dacă speciale strânse. cheie, este necesar să se proprietate corespunzătoare: altKey. ctrlKey. shiftKey sau metaKey (Mac).
- Pentru a sprijini Ctrl + click, nu uitați să verificați dacă (e.metaKey || e.ctrlKey). pentru utilizatorii de Mac, de asemenea, au fost îndeplinite.
Această sarcină este format din trei părți.
- Faceți o listă a elementelor din care pot fi recuperate prin clic.
- Adăugați un multi-selecție. Dacă faceți clic cu apăsat Ctrl (Cmd pentru Mac), apoi se adaugă elementul, eliminat din selecție.
- Adăugați alocarea de timp. Dacă există un clic cu Shift apăsat. apoi se adaugă la intervalul de alocare din elementele anterioare înainte de clicked. Nu contează ce acțiune a făcut clic anterior. Acest lucru este similar cu modul în care managerul de fișiere într-un număr de sistem de operare, dar un pic mai ușor ca realizare concretă a descărcării variază între diferite sisteme de operare, iar reproducerea exactă nu este inclusă în această sarcină.
P.S. În această sarcină, putem presupune că în lista de articole pot fi numai text, fără tag-uri imbricate.
P.P.S. Prelucrarea Ctrl (Cmd) și în același timp apăsând Shift poate fi orice.
Cu toate acestea, problema este că ascunde-dezvăluire apare chiar și atunci când faceți clic în afara titlului. pe un spațiu gol de pe dreapta.
Cum de a ascunde / dezvălui copiii doar făcând clic pe titlul?
Problema arborelui drop-down se decide după cum urmează: titluri înfășurat într-o SPAN elemente doar verificate și face clic pe ele. Imaginați-vă pentru un moment pe care nu vrem să-și încheie text în travee. dar vrem să lăsăm așa cum este. De exemplu, din motive de performanță, în cazul în care arborele este deja foarte mare, deoarece ambalajul tuturor titlurilor din SPAN va crește numărul de noduri din DOM-2 ori.
Rezolva problema fără ambalaj antete SPAN. Folosind lucrul cu coordonate.
Documentul original conține arbore accesabile.
P.S. Sarcina - mai degrabă pe inteligenta, dar abordarea poate fi utilă în viața reală.
La eveniment clic are coordonate. Verificați pe ele, dacă un clic pe titlul a fost.
Cel mai adânc nod din coordonatele pot fi obtinute prin apelarea document.elementFromPoint (clientX, clientY).
... Dar antetul este un nod de text, astfel încât această caracteristică nu va lucra pentru el. Cu toate acestea, este, cu toate acestea, pot fi eludate. Cum?
Sfat 2
Puteți atunci când faceți clic pe LI face un SPAN temporar și mutați-l un antet nod text.
După această verificare, în cazul în care faceți clic l-au lovit și să se întoarcă totul așa cum era.
În etapa 3, un nod text este eliminat din spate SPAN. totul revine la starea sa inițială.