Události myši

V této kapitole pronikneme do dalších detailů ohledně událostí myši a jejich vlastností.

Prosíme všimněte si, že tyto události mohou přicházet nejenom z myši, ale i z jiných zařízení, např. telefonů a tabletů, kde jsou emulovány z důvodu zachování kompatibility.

Typy událostí myši

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

mousedown/mouseup

Nad elementem je stisknuto/uvolněno tlačítko myši.

mouseover/mouseout

Nad element vstoupí/element opustí ukazatel myši.

mousemove

Tuto událost vyvolá každý pohyb myši nad elementem.

click

Spustí se po mousedown a pak mouseup nad stejným elementem, jestliže bylo použito levé tlačítko myši.

dblclick

Spustí se po dvou kliknutích na stejný element v krátkém časovém rozmezí. V současnosti se používá zřídka.

contextmenu

Spustí se, když je stisknuto pravé tlačítko myši. Jsou i jiné způsoby, jak otevřít kontextové menu, např. stisknutím speciální klávesy na klávesnici. V takovém případě se tato událost spustí také, takže to není pouze událost myši.

…Existuje i několik dalších událostí, které probereme později.

Pořadí událostí

Jak vidíte z uvedeného seznamu, jedna uživatelská akce může spustit více událostí.

Například stisk levého tlačítka myši vyvolá nejprve mousedown, když je tlačítko stisknuto, a pak mouseup a click, když je uvolněno.

V případech, kdy jedna akce vyvolá více událostí, je jejich pořadí pevně dáno. To znamená, že handlery jsou volány v pořadí mousedown → mouseup → click.

Klikněte na následující tlačítko a uvidíte události. Zkuste si i dvojité kliknutí.

V uvedeném testu jsou všechny události myši logovány, a pokud je mezi nimi delší prodleva než 1 sekunda, budou odděleny vodorovnou čarou.

Vidíme také vlastnost button, která nám umožňuje zjistit, o které tlačítko šlo; vysvětlíme ji dále.

Tlačítko myši

Události týkající se klikání mají vždy vlastnost button, která nám umožňuje přesně zjistit tlačítko.

Při událostech click a contextmenu ji obvykle nepoužíváme, jelikož první uvedená se stává jen při kliknutí levým tlačítkem a druhá při kliknutí pravým.

Naproti tomu mousedown a mouseup mohou událost.button potřebovat, protože tyto události se spouštějí při každém tlačítku, takže nám button umožní rozlišovat mezi „stiskem pravého tlačítka“ a „stiskem levého tlačítka“.

Možné hodnoty událost.button jsou:

Většina myší má jen levé a pravé tlačítko, takže možné hodnoty jsou 0 a 2. Podobné události generují i doteková zařízení, když se jich uživatel dotkne.

Existuje také vlastnost událost.buttons, která obsahuje všechna stisknutá tlačítka ve formě celého čísla, jeden bit pro každé tlačítko. V praxi se tato vlastnost používá jen velmi zřídka. Kdybyste ji někdy potřebovali, naleznete podrobnosti na MDN.

Modifikátory: shift, alt, ctrl a meta

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

Vlastnosti událostí:

• shiftKey: Shift
• altKey: Alt (nebo Opt na Macu)
• ctrlKey: Ctrl
• metaKey: Cmd na Macu

Jsou true, jestliže byla během události stisknuta odpovídající klávesa.

Například následující tlačítko funguje jen při kliknutí spolu se stisknutím Alt+Shift:

<button id="tlačítko">Alt+Shift+Klikněte na mě!</button>

<script>
  tlačítko.onclick = function(událost) {
    if (událost.altKey && událost.shiftKey) {
      alert('Hurá!');
    }
  };
</script>

Souřadnice: clientX/Y, pageX/Y

Všechny události myši poskytují souřadnice dvěma způsoby:

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

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

Ve zkratce, souřadnice relativní vzhledem 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 aktuálního levého horního rohu okna, a když stránka roluje, mění se.

Máme-li například okno o rozměrech 500x500 a myš je v levém horním rohu, pak clientX a clientY jsou 0 bez ohledu na to, kam je stránka odrolovaná.

A jestliže je myš uprostřed, pak clientX a clientY jsou 250 bez ohledu na to, na kterém místě dokumentu se myš nachází. V tomto ohledu se podobají position:fixed.

Přesuňte myš nad vstupní pole, abyste viděli clientX/clientY (příklad je umístěn v iframe, takže souřadnice jsou relativní vzhledem k tomuto iframe):

<input onmousemove="this.value=event.clientX+':'+event.clientY" value="Přesuňte myš na mě">

Zákaz výběru textu při události mousedown

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

Například dvojité kliknutí na následující text jej kromě spuštění našeho handleru vybere:

<span ondblclick="alert('dblclick')">Dvakrát na mě klikněte</span>

Rovněž když uživatel stiskne levé tlačítko myši a bez jeho uvolnění myší pohne, vyvolá tím výběr, často nechtěný.

Způsobů, jak výběr zakázat, existuje víc. Můžete si o nich přečíst v kapitole Výběr textu: třídy Selection a Range.

V tomto konkrétním případě je nejrozumnějším způsobem zakázat akci prohlížeče při události mousedown. Tím zakážeme oba tyto výběry:

Před...
<b ondblclick="alert('Klik!')" onmousedown="return false">
  Dvakrát na mě klikněte
</b>
...Za

Nyní nebude tučný element při dvojitém kliknutí vybrán a ani stisknutí levého tlačítka na něm nevyvolá výběr.

Prosíme všimněte si, že vybrat text uvnitř je stále možné. Výběr by však neměl začínat na samotném textu, ale před nebo za ním. Tak se to uživatelům obvykle hodí.

<div oncopy="alert('Zákaz kopírování!');return false">
  Drahý uživateli,
  kopírování je ti zakázáno.
  Pokud ovšem znáš JS nebo HTML, můžeš i tak všechno získat ze zdrojového kódu stránky.
</div>

Shrnutí

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

• Tlačítko: button.

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

  • Pokud chcete zpracovat Ctrl, nezapomínejte na uživatele Macu, kteří obvykle používají Cmd, proto je lepší kontrolovat if (e.metaKey || e.ctrlKey).

• Souřadnice vzhledem k oknu: clientX/clientY.

• Souřadnice vzhledem k dokumentu: pageX/pageY.

Standardní akce prohlížeče při mousedown je výběr textu. Pokud se do rozhraní nehodí, měli byste ho zakázat.

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