Kolejna lekcja o mouse eventach w JavaScript. Zaczynamy je dość dobrze rozumieć, ale wciąż jeszcze jest wiele do poznania.
e.clientX/e.clientY: odległość na osi X/Y od góry/lewej strony widocznej części strony do położenia myszy
e.pageX/e.pageY: odległość na osi X/Y od góry/lewej strony dokumentu, wliczając w to niewidoczną część strony (z uwagi na scrollowanie)
e.screenX/e.screenY: odległość na osi X/Y od góry/lewej strony ekranu (wliczając w to kontrolki przeglądarki) do pointera myszy
e.offsetX/e.offsetY: offset od miejsca pointera względem paddingu klikniętego elementu
Jeszcze raz:
clientX/Y: reprezentuje window, okno, viewport i położenie pointera względem niego
pageX/Y: reprezentuje dokument, wliczając w to niewidoczne jego części (z uwagi na scrollowanie)
screenX/Y: reprezentuje cały ekran, wliczając w to kontrolki przeglądarki oraz cały ekran
offsetX/Y: reprezentuje kliknięty element
Inne properties mouse events:
- altKey: czy alt był wciśnięty
- shiftKey: czy shift był wciśnięty
- button: który guzik myszy odpalił event
- buttons: które guziki myszy były wciśnięte podczas odpalenia eventu
- metaKey: czy windows key/mac key był wciśnięty podczas eventu
- relatedTarget: dotyczy eventów hoverowych, już poznaliśmy w lekcji poprzedniej
