Události myši

V této kapitole se dostaneme do podrobností o událostech myši a jejich vlastnostech.

Vezměte prosím na vědomí:takové události mohou pocházet nejen z „myších zařízení“, ale také z jiných zařízení, jako jsou telefony a tablety, kde jsou kvůli kompatibilitě emulovány.

Typy událostí myši

Některé z těchto událostí jsme již viděli:

mousedown/mouseup
Kliknutí/uvolnění tlačítka myši nad prvkem.
mouseover/mouseout
Ukazatel myši vychází z prvku.
mousemove
Tuto událost spustí každý pohyb myši nad prvkem.
click
Spouštěče po mousedown a poté mouseup nad stejným prvkem, pokud bylo použito levé tlačítko myši.
dblclick
Spustí se po dvou kliknutích na stejný prvek v krátkém časovém rámci. V současné době se používá zřídka.
contextmenu
Spustí se po stisknutí pravého tlačítka myši. Existují i ​​jiné způsoby, jak otevřít kontextovou nabídku, např. pomocí speciální klávesy klávesnice se spouští i v tomto případě, takže to není přesně událost myši.

…Existuje také několik dalších událostí, budeme se jim věnovat později.

Pořadí událostí

Jak můžete vidět z výše uvedeného seznamu, akce uživatele může spustit více událostí.

Například první kliknutí levým tlačítkem spustí mousedown , po stisknutí tlačítka pak mouseup a click až bude vydán.

V případech, kdy jedna akce iniciuje více událostí, je jejich pořadí pevné. To znamená, že handlery jsou volány v pořadí mousedownmouseupclick .

Klikněte na tlačítko níže a uvidíte události. Zkuste také dvakrát kliknout.

Na níže uvedeném testovacím stojanu jsou zaznamenávány všechny události myši, a pokud je mezi nimi zpoždění delší než 1 sekunda, jsou odděleny vodorovným pravidlem.

Také můžeme vidět button vlastnost, která nám umožňuje detekovat tlačítko myši; je to vysvětleno níže.

Tlačítko myši

Události související s kliknutím mají vždy button vlastnost, která umožňuje získat přesné tlačítko myši.

Obvykle jej nepoužíváme pro click a contextmenu události, protože k prvnímu dochází pouze po kliknutí levým tlačítkem myši a k ​​druhému pouze při kliknutí pravým tlačítkem.

Na druhou stranu mousedown a mouseup handlery mohou potřebovat event.button , protože tyto události se spouští na libovolném tlačítku, takže button umožňuje rozlišovat mezi „pravým tlačítkem myši“ a „levým tlačítkem myši dolů“.

Možné hodnoty event.button jsou:

Stav tlačítka event.button
Levé tlačítko (primární) 0
Prostřední tlačítko (pomocné) 1
Pravé tlačítko (sekundární) 2
Tlačítko X1 (zpět) 3
Tlačítko X2 (vpřed) 4

Většina zařízení myší má pouze levé a pravé tlačítko, takže možné hodnoty jsou 0 nebo 2 . Dotyková zařízení také generují podobné události, když na ně člověk klepne.

Je zde také event.buttons vlastnost, která má všechna aktuálně stisknutá tlačítka jako celé číslo, jeden bit na tlačítko. V praxi se tato vlastnost používá velmi zřídka, podrobnosti najdete na MDN, pokud ji budete někdy potřebovat.

Zastaralé event.which

Starý kód může používat event.which vlastnost, která je starým nestandardním způsobem získání tlačítka s možnými hodnotami:

  • event.which == 1 – levé tlačítko,
  • event.which == 2 – prostřední tlačítko,
  • event.which == 3 – pravé tlačítko.

Od této chvíle event.which je zastaralá, neměli bychom ji používat.

Modifikátory:shift, alt, ctrl a meta

Všechny události myši obsahují informace o stisknutých modifikačních klávesách.

Vlastnosti události:

  • shiftKey :Shift
  • altKey :Alt (nebo Opt pro Mac)
  • ctrlKey :Ctrl
  • metaKey :Cmd pro Mac

Jsou true pokud byla během události stisknuta odpovídající klávesa.

Tlačítko níže například funguje pouze na kombinaci Alt+Shift +klikněte:

<button id="button">Alt+Shift+Click on me!</button>

<script>
 button.onclick = function(event) {
 if (event.altKey && event.shiftKey) {
 alert('Hooray!');
 }
 };
</script>
Pozor:na Macu je to obvykle Cmd místo Ctrl

Ve Windows a Linuxu existují modifikační klávesy Alt , Shift a Ctrl . Na Macu je ještě jeden:Cmd , odpovídající vlastnosti metaKey .

Ve většině aplikací, když Windows/Linux používá Ctrl , na Macu Cmd se používá.

To znamená:kde uživatel systému Windows stiskne Ctrl+Enter nebo Ctrl+A , uživatel Mac by stiskl Cmd+Enter nebo Cmd+A , a tak dále.

Pokud tedy chceme podporovat kombinace jako Ctrl +klikněte a pro Mac má smysl použít Cmd +klikněte. To je pro uživatele Mac pohodlnější.

I když bychom rádi přinutili uživatele Mac, aby Ctrl +klikněte – to je trochu obtížné. Problém je:kliknutí levým tlačítkem s Ctrl je interpretováno jako kliknutí pravým tlačítkem na MacOS a vygeneruje contextmenu událost, nikoli click jako Windows/Linux.

Pokud tedy chceme, aby se uživatelé všech operačních systémů cítili pohodlně, pak společně s ctrlKey měli bychom zkontrolovat metaKey .

Pro kód JS to znamená, že bychom měli zkontrolovat if (event.ctrlKey || event.metaKey) .

Existují také mobilní zařízení

Kombinace klávesnice jsou dobré jako doplněk k pracovnímu postupu. Takže pokud návštěvník používá klávesnici – fungují.

Ale pokud to jejich zařízení nemá – pak by měl existovat způsob, jak žít bez modifikačních kláves.

Souřadnice:klientX/Y, stránkaX/Y

Všechny události myši poskytují souřadnice ve dvou variantách:

  1. Relativní k oknu:clientX a clientY .
  2. Relativní k dokumentu:pageX a pageY .

Rozdíl mezi nimi jsme probrali již v kapitole Souřadnice.

Stručně řečeno, souřadnice relativní k dokumentu pageX/Y se počítají od levého horního rohu dokumentu a při rolování stránky se nemění, zatímco clientX/Y se počítají od levého horního rohu aktuálního okna. Když stránku posunete, změní se.

Pokud máme například okno o velikosti 500x500 a myš je v levém horním rohu, pak clientX a clientY jsou 0 , bez ohledu na to, jak se stránka posouvá.

A pokud je myš uprostřed, pak clientX a clientY jsou 250 , bez ohledu na to, jaké místo v dokumentu to je. Jsou podobné position:fixed v tomto ohledu.

Přesuňte ukazatel myši nad vstupní pole a zobrazí se clientX/clientY (příklad je v iframe , takže souřadnice jsou relativní k tomuto iframe ):

<input onmousemove="this.value=event.clientX+':'+event.clientY" value="Mouse over me">

Zabránění výběru při sjetí myší

Dvojité kliknutí myší má vedlejší efekt, který může být v některých rozhraních rušivý:vybírá text.

Například dvojitým kliknutím na text níže jej vyberete vedle našeho obslužného programu:

<span ondblclick="alert('dblclick')">Double-click me</span>

Pokud stisknete levé tlačítko myši a aniž byste jej uvolnili, pohnete myší, také se výběr stane často nechtěným.

Existuje několik způsobů, jak zabránit výběru, které si můžete přečíst v kapitole Výběr a rozsah.

V tomto konkrétním případě je nejrozumnějším způsobem zabránit akci prohlížeče na mousedown . Zabrání oběma těmto výběrům:

Before...
<b ondblclick="alert('Click!')" onmousedown="return false">
 Double-click me
</b>
...After

Nyní se tučný prvek nevybírá po dvojitém kliknutí a stisknutím levého tlačítka na něm výběr nezahájíte.

Poznámka:text uvnitř je stále volitelný. Výběr by však neměl začínat na textu samotném, ale před ním nebo za ním. Obvykle to uživatelům vyhovuje.

Zabránění kopírování

Pokud chceme zakázat výběr a chránit obsah naší stránky před kopírováním a vkládáním, můžeme použít jinou událost:oncopy .

<div oncopy="alert('Copying forbidden!');return false">
 Dear user,
 The copying is forbidden for you.
 If you know JS or HTML, then you can get everything from the page source though.
</div>

Pokud se pokusíte zkopírovat část textu v <div> , to nebude fungovat, protože výchozí akce oncopy je zabráněno.

Uživatel má jistě přístup ke zdroji HTML stránky a může odtud převzít obsah, ale ne každý ví, jak to udělat.

Shrnutí

Události myši mají následující vlastnosti:

  • Tlačítko:button .

  • Modifikační klávesy (true pokud je stisknuto):altKey , ctrlKey , shiftKey a metaKey (Mac).

    • Pokud chcete ovládat Ctrl , pak nezapomeňte na uživatele Mac, ti obvykle používají Cmd , takže je lepší zkontrolovat if (e.metaKey || e.ctrlKey) .
  • Souřadnice relativní k oknu:clientX/clientY .

  • Souřadnice relativní k dokumentu:pageX/pageY .

Výchozí akce prohlížeče mousedown je výběr textu, pokud to není dobré pro rozhraní, mělo by se mu zabránit.

V další kapitole uvidíme další podrobnosti o událostech, které následují pohyb ukazatele, a o tom, jak sledovat změny prvků pod ním.