rákattint az egér gombját, a koordinátákat

Ebben a fejezetben azt kell megérteni mélyebben a lista egéreseményeket, úgy az általános tulajdonságait, valamint az eseményeket, amelyek kapcsolatban vannak egy kattintással.

Az események két csoportba sorolhatjuk: az „egyszerű” és „komplex”.

mousedown az egér gomb lenyomásakor egy elem fölé. MouseUp egérgomb felengedésekor egy elem fölé. egérráhelyezés egér megjelent az elem fölé. Egér mouseout balra a elemet. MouseMove Minden az egeret az elem generálja az eseményt.

kattintson hívni az egérrel, hogy van, amikor a mousedown. majd MouseUp egyik eleme szövegkörnyezet hívott, ha rákattint a jobb egérgombbal egy elemre. dblclick meghívásra, ha dupla kattintással a tételt.

Komplex állhat egyszerű, így elméletileg lehetne nélkülük. De ott vannak, és ez jó, mert sokkal kényelmesebb nekik.

Egy akció okozhat több esemény.

Például CPC első mousedown lenyomva, majd MouseUp, majd kattintson a gomb elengedésekor.

Azokban az esetekben, ahol egyetlen művelettel generál több eseményt, sorrendjük van rögzítve. Azaz, a rakodók fogják hívni rendelni mousedown → MouseUp → kattintással.

Kattintson az alábbi gombra, és látni fogja, hogy mely események fordulnak elő ugyanabban az időben. Próbálja még dupla kattintással.

A próbapadon az összes egér esemény rögzítésre, és ha az esemény zajlik között több, mint 1 másodperc, elváltak az olvashatóság vonalon. Szintén jelen van, amelynek tulajdonságai / gombot. amelyek meghatározzák az egér gombját. Úgy véljük őket tovább.

Minden esemény külön kezel.

Például kattintva MouseUp + kattintás egyidejűleg fellépnek, de egymás után feldolgozásra. Először MouseUp teljesen kitöltött feldolgozásra. majd futtatni kattintva.

Amikor az események feldolgozására kapcsolatos kattintás az egérrel, fontos tudni, hogy melyik gombot nyomta meg.

Az egérgombot esetén objektum, amely egy tulajdonság.

A gyakorlatban ritkán használják, mert általában hung handler vagy onclick - csak a bal egérgombbal, vagy oncontextmenu - csak jobb.

A lehetséges értékek:

• event.which == 1 - Bal gomb
• event.which == 2 - a középső gombot
• event.which == 3 - jobb gomb

Ez a tulajdonság nem támogatott IE8-, de lehet beszerezni a leírt módon a fejezet végén.

Ez az esemény akkor aktiválódik, ha rákattint a jobb egérgombbal:

Ha rákattint a gombra, miután oncontextmenu felvezető megmutatja a szokásos helyi menüt, ami mindig a böngésző, ha rákattint a jobb gombot. Ez az alapértelmezett művelet.

Ha nem akarjuk, hogy megjelenjen a beépített menü, például azért, mert megmutatja a jellemző a mi alkalmazás felülbírálhatja az alapértelmezett művelet.

Az alábbi példában a beépített menü nem jelenik meg:

Minden egér esemény információkat tartalmaz Kulcsmódosító.

Például az alábbi gombok csak akkor fog működni az Alt + Shift + kattintás:

Megjegyzés: A Mac helyett Ctrl Cmd

Futtató számítógépeken a Windows és a Linux van egy speciális Alt billentyűt. Shift és Ctrl. A Mac, van egy másik speciális kulcs: parancs. amely megfelel metaKey tulajdon.

A legtöbb esetben, ha a Windows / Linux Ctrl. Mac a CMD. Amennyiben Windows felhasználó megnyomja a Ctrl + Enter vagy a Ctrl + A. Mac felhasználó megnyomja Cmd + Enter vagy CMD + A. és így tovább, szinte mindig Utasítás a Ctrl helyett.

Ezért, ha azt szeretné, hogy a kombináció a Ctrl + kattintás vagy hasonlók, akkor a Mac értelme használni Cmd + kattintás. Mac-felhasználók lesz sokkal kényelmesebb.

Sőt, még ha szeretnénk, hogy ez a Mac felhasználók a Ctrl + kattintás - ez nehéz lett volna. Az a tény, hogy a szokásos kattintva Ctrl + húzás Mac működik jobb klikk, és generál oncontextmenu esemény. ahelyett onclick. Mindkét Windows / Linux.

A döntés - a felhasználók két operációs rendszer dolgozik a kényelmet, párosítva ctrlKey kell használni metaKey.

A JS-kódot, ez azt jelenti, hogy ellenőrizni kell, ha (event.ctrlKey || event.metaKey) a kényelem Mac felhasználók számára.

Minden egér eseményekre nyújt a jelenlegi koordinátái a kurzort két módja van: képest az ablak és a relatív a dokumentumot.

Pár ingatlan clientX / clientY koordinátáit tartalmazza a kurzor relatív az aktuális ablakot.

Ebben az esetben például, ha a képernyő mérete 500x500, és az egér a központban, majd clientX clientY és egyenlő lesz a 250.

Lehetőség van valahogy görgetni, de ha nem mozog az egér, a kurzor koordinátái clientX / clientY nem fog változni, mert kell tekinteni képest az ablakon, nem a dokumentumot.

Húzza az egeret a szövegdobozba, hogy clientX / clientY:

Az ugyanabban a koordináta rendszerben, és működik elem.getBoundingClientRect () metódust. visszaadja a koordinátáit az elem és helyzete: fix.

koordinátáit a kurzort a dokumentum tulajdonságait pageX / pageY.

Mivel ezeket a koordinátákat - tekintettel a bal felső csomópont a dokumentum nem az ablakon, lehetővé teszik a görgetés. Ha görgetni az oldalt, és ne érintse meg az egeret, a kurzor koordinátái pageX / pageY változtatni a scroll összeg vannak kötve egy adott ponton a dokumentumban.

A IE8- ezek a tulajdonságok nem, de lehet kapni őket a leírt módon a fejezet végén.

Húzza az egeret a szövegdobozba, hogy pageX / pageY (kivéve IE8-):

Az ugyanabban a koordináta rendszerben dolgozó position: absolute. Ha egy elem van elhelyezve képest a dokumentumot.

Elavult: x, y, layerX, layerY

Egyes böngészők támogatják ingatlan event.x / y. event.layerX / layerY.

Ezek a tulajdonságok elavult, nem szabványos, és nem tesz hozzá semmit a fenti. Használd őket nem szükséges.

Minden böngésző kivételével IE8- generálni dblclick mellett más események.

• mousedown (préselt)
• MouseUp + kattintás (préselt)
• mousedown (préselt)
• MouseUp + kattintás + dblclick (lenyomva).

IE8- második klikk nem generál mousedown és kattintson.

• mousedown (préselt)
• MouseUp + kattintás (préselt)
• (Préselt másodszor nélkül esemény)
• MouseUp + dblclick (préselt).

Ezért, hogy elkapjon egy dupla kattintással a IE8-, követés csak kattints. Nem, mert a második megnyomásakor nem. Meg kell pontosan az esemény dblclick.

A régi IE8- amely nem támogatta az ingatlan. hanem használják a tulajdonság gombra. amely egy 3 bites szám, amelyben minden bit felel meg egérgombbal. Bit értéke 1, ha a megfelelő gomb megnyomásával.

Feloldani azt - kell egy kis művelet ( "Bit I"):

• . (gomb 1) == true (1. bit be van állítva), ha a bal gombot,
• . (gomb 2) == true (a 2. bit be van állítva), ha a megfelelő gombot,
• . (gomb 4) == true (3. bit készlet) ha a központi gomb megnyomásakor.

Ami érdekes, hogy ebben az esetben tudjuk kideríteni, hogy a két gomb megnyomása egyidejűleg, míg a szabvány, amely egy ilyen lehetőséget nem. Tehát bizonyos értelemben gomb funkció - erősebb.

Ez egyszerű, hogy egy függvény, amely fel az ingatlan, mely gombra. ha nem:

Az IE 9-es verzió nem támogatott tulajdonságok pageX / pageY. de lehet kapni őket, hozzátéve, hogy clientX / clientY méretű görgetés.

További információ a számolásra lehet olvasni az oldalon görgetés.

Itt bemutatunk egy kész opció, amely lehetővé teszi számunkra, hogy pageX / pageY régi és nagyon régi IE:

egéresemények a következő tulajdonságokkal rendelkezik:

• Mouse Button: amelyből (IE8-: kell oltani a gomb)
• Elem, amely felvetette az eseményről: cél
• Koordináták képest az ablakon: clientX / clientY
• Koordináták képest a dokumentumot: pageX / pageY (az IE8-: meg kell tenni a clientX / Y és görgetés)
• Ha szorított akció. kulcs, szükség van a megfelelő tulajdonság: altKey. ctrlKey. shiftKey vagy metaKey (Mac).
• Hogy támogassa a Ctrl + klikk, ne felejtsük el, hogy ellenőrizze, ha (e.metaKey || e.ctrlKey). Mac felhasználók is elégedettek voltak.

Ez a feladat három részből áll.

1. Készítsen egy listát az elemek, amelyek nyerhetjük kattintva.
2. Add a multi-kiválasztást. Ha rákattint a préselt Ctrl (CMD Mac), akkor az elem hozzá, eltávolítjuk a kiválasztás.
3. Add időfelosztás. Ha van egy kattintással sajtolt Shift. Ezután hozzáadjuk a kiosztási intervallum a korábbi elemeket, mielőtt a kattintással. Nem számít, hogy milyen intézkedéseket tett az előző kattintással. Ez hasonló ahhoz, ahogy a fájlkezelő számos operációs rendszer, de egy kicsit könnyebb, mint konkrét megvalósítását kisülés között változik, különböző operációs rendszerek, valamint a pontos reprodukció nem tartalmazza ezt a feladatot.

Ui Ebben a feladatban, akkor feltételezhetjük, hogy a tételek listáját lehet szöveg, csak nem beágyazott címkéket.
P.P.S. Feldolgozás Ctrl (cmd) majd egyszerre nyomja a Shift lehet bármilyen.

A probléma azonban az, hogy a hide-közzétételi akkor fordul elő, ha rákattint kívül a címet. egy üres hely a jobb oldalon.

Hogyan lehet elrejteni / felfedje a gyerekek csak rákattint a címe?

A probléma a legördülő fa a következőképpen határozott: címek csomagolva egy SPAN elemek kizárólag ellenőrzött rájuk kattint. Képzeljük el egy pillanatra, hogy nem akarjuk, hogy lezárja a szöveget a SPAN. de szeretnénk hagyni, ahogy van. Például a teljesítmény miatt, ha a fa már nagyon nagy, mert a csomagolás összes címet a SPAN növeli a csomópontok száma a DOM-2-szer.

Megoldani a problémát anélkül csomagolás fejlécek SPAN. A munka koordinátákat.

Az eredeti dokumentum kattintható fa.

Ui A feladat - inkább az intelligencia, de a megközelítés hasznos lehet a valós életben.

A click esemény koordinátáit. Nézz rájuk, hogy egy kattintás a főcím volt.

A legmélyebb csomópont a koordinátákat állíthatjuk elő hívja document.elementFromPoint (clientX, clientY).

... De a fejléc egy szöveges csomópont, így ez a funkció nem működik neki. Azonban ez, mégis, lehet megkerülni. Hogyan?

Tipp 2

Akkor, ha rákattint LI hogy egy átmeneti SPAN és mozgassa a szöveget csomópont fejlécet.

Az ellenőrzés után, ha a kattintás megütötte és vissza mindent, ahogy volt.

A 3. lépésben egy szöveges csomópont eltávolítjuk a hátsó SPAN. minden visszatér az eredeti állapotába.