Standardní akce prohlížeče

Mnoho událostí automaticky vede k tomu, že prohlížeč vykoná určitou akci.

Například:

• Kliknutí na odkaz – vyvolá navigaci na jeho URL.
• Kliknutí na tlačítko odeslání formuláře – vyvolá jeho odeslání na server.
• Stisknutí tlačítka myÅ¡i nad textem a pÅ™esun ukazatele – vybere (označí) text.

Jestliže v JavaScriptu zpracováváme událost, můžeme chtít, aby se příslušná akce prohlížeče nevykonala, protože místo ní chceme implementovat jiné chování.

Zákaz akcí prohlížeče

Existují dva způsoby, jak sdělit prohlížeči, že nechceme, aby konal svou akci:

• Hlavním způsobem je použití objektu událost, který obsahuje metodu událost.preventDefault().
• Jestliže je handler pÅ™iÅ™azen prostÅ™ednictvím on<událost> (ne metodou addEventListener), pak bude stejným způsobem fungovat i vrácení false.

V následujícím HTML kódu kliknutí na odkaz nevyvolá navigaci; prohlížeč neudělá nic:

<a href="/" onclick="return false">Klikněte sem</a>
nebo
<a href="/" onclick="event.preventDefault()">sem</a>

V dalším příkladu pomocí této techniky vytvoříme JavaScriptové menu.

Příklad: menu

Uvažujme menu na stránce, například takto:

<ul id="menu" class="menu">
  <li><a href="/html">HTML</a></li>
  <li><a href="/javascript">JavaScript</a></li>
  <li><a href="/css">CSS</a></li>
</ul>

Takto bude vypadat s určitým CSS:

Položky menu jsou implementovány jako HTML odkazy <a>, ne jako tlačítka <button>. Má to nÄ›kolik důvodů, například:

• Mnozí lidé rádi používají „kliknutí pravým tlačítkem“ – „otevÅ™ení v novém okně“. Pokud bychom použili <button> nebo <span>, nefungovalo by to.
• Vyhledávací stroje pÅ™i indexování následují <a href="...">.

V tomto kódu tedy používáme <a>. Chceme vÅ¡ak kliknutí zpracovávat v JavaScriptu, takže bychom mÄ›li zakázat standardní akci prohlížeče.

Například:

menu.onclick = function(událost) {
  if (událost.target.nodeName != 'A') return;

  let href = událost.target.getAttribute('href');
  alert( href ); // ...může načítat ze serveru, generovat UI atd.

  return false; // zakáže akci prohlížeče (nepřejde na URL)
};

Kdybychom vypustili return false, pak by po provedení naÅ¡eho kódu prohlížeč vykonal svou „standardní akci“ – navigaci na URL v href. A to tady nepotÅ™ebujeme, jelikož kliknutí zpracováváme sami.

Mimochodem, použití delegování událostí zde učiní naše menu velmi flexibilním. Můžeme přidávat vnořené seznamy a pomocí CSS je stylizovat, aby „klouzaly dolů“.

<input value="Zaměření funguje" onfocus="this.value=''">
<input onmousedown="return false" onfocus="this.value=''" value="Klikni na mÄ›">

Možnost handleru „passive“

Volitelná možnost passive: true metody addEventListener oznamuje prohlížeči, že handler nebude volat preventDefault().

K čemu to může být potřeba?

Existují události, napÅ™. touchmove na mobilních zařízeních (když se uživatel posune prstem na obrazovce), které standardnÄ› vyvolají rolování, ale v handleru lze toto rolování zakázat voláním preventDefault().

Když tedy prohlížeč detekuje takovou událost, musí nejprve zpracovat vÅ¡echny handlery, a teprve pokud nikde nebylo voláno preventDefault, může provádÄ›t rolování. To může způsobit nechtÄ›né prodlevy a „zasekávání“ v UI.

Možnost passive: true říká prohlížeči, že handler nebude rolování bránit. Pak prohlížeč provede rolování okamžitÄ› a poskytne maximálnÄ› plynulý zážitek, zatímco bude zpracována událost.

V nÄ›kterých prohlížečích (Firefox, Chrome) je passive standardnÄ› true pro události touchstart a touchmove.

událost.defaultPrevented

Vlastnost událost.defaultPrevented je true, pokud byla standardní akce zakázána, v opačném případÄ› je false.

Má to zajímavý případ použití.

Vzpomínáte si, jak jsme v kapitole Bublání a zachytávání hovoÅ™ili o událost.stopPropagation() a o tom, proč je Å¡patné zastavovat bublání?

NÄ›kdy místo toho můžeme použít událost.defaultPrevented, abychom oznámili ostatním handlerům událostí, že událost byla již zpracována.

Podívejme se na praktický příklad.

StandardnÄ› prohlížeč na událost contextmenu (kliknutí pravým tlačítkem myÅ¡i) zobrazí kontextové menu se standardními možnostmi. Můžeme to zakázat a zobrazit vlastní menu, například:

<button>Pravé kliknutí zobrazí kontextové menu prohlížeče</button>

<button oncontextmenu="alert('Zobrazíme své menu'); return false">
  Pravé kliknutí zobrazí naše kontextové menu
</button>

Nyní navíc k tomuto kontextovému menu chceme implementovat kontextové menu pro celý dokument.

Po kliknutí pravým tlačítkem by se mělo zobrazit nejbližší kontextové menu.

<p>Pravé kliknutí sem zobrazí kontextové menu dokumentu</p>
<button id="elem">Pravé kliknutí sem zobrazí kontextové menu tlačítka</button>

<script>
  elem.oncontextmenu = function(událost) {
    událost.preventDefault();
    alert("Kontextové menu tlačítka");
  };

  document.oncontextmenu = function(událost) {
    událost.preventDefault();
    alert("Kontextové menu dokumentu");
  };
</script>

Problém je v tom, že když klikneme na elem, obdržíme dvÄ› menu: pro tlačítko a (událost probublá výše) pro dokument.

Jak to opravit? Jedno z Å™eÅ¡ení je pomyslet si: „Když zpracujeme pravé kliknutí v handleru tlačítka, zastavíme bublání“ a použít událost.stopPropagation():

<p>Pravým kliknutím zobrazíte menu dokumentu</p>
<button id="elem">Pravým kliknutím zobrazíte menu tlačítka (ošetřeno pomocí událost.stopPropagation)</button>

<script>
  elem.oncontextmenu = function(událost) {
    událost.preventDefault();
    událost.stopPropagation();
    alert("Kontextové menu tlačítka");
  };

  document.oncontextmenu = function(událost) {
    událost.preventDefault();
    alert("Kontextové menu dokumentu");
  };
</script>

Nyní menu pro tlačítko funguje tak, jak jsme zamýšleli, ale cena za to je vysoká. Navždy se vzdáváme přístupu k informaci o pravém kliknutí v celém vnějším kódu, včetně počítadel, která shromažďují statistiku a podobně. To není příliš moudré.

Alternativním Å™eÅ¡ením by bylo v handleru v document prověřovat, zda byla standardní akce zakázána. Pokud ano, událost byla zpracována a my na ni nemusíme reagovat.

<p>Pravým kliknutím zobrazíte menu dokumentu (přidána kontrola na událost.defaultPrevented)</p>
<button id="elem">Pravým kliknutím zobrazíte menu tlačítka</button>

<script>
  elem.oncontextmenu = function(událost) {
    událost.preventDefault();
    alert("Kontextové menu tlačítka");
  };

  document.oncontextmenu = function(událost) {
    if (událost.defaultPrevented) return;

    událost.preventDefault();
    alert("Kontextové menu dokumentu");
  };
</script>

I nyní vÅ¡echno funguje správnÄ›. Fungovalo by to i tehdy, kdybychom mÄ›li vnoÅ™ené elementy a každý z nich obsahoval vlastní kontextové menu. Jenom je tÅ™eba kontrolovat událost.defaultPrevented v každém handleru contextmenu.

Shrnutí

Existuje mnoho standardních akcí prohlížeče:

• mousedown – zahájení výbÄ›ru textu (pohybem myší).
• click na <input type="checkbox"> – zaÅ¡krtne/odÅ¡krtne tento input.
• submit – tuto událost vyvolá kliknutí na <input type="submit"> nebo stisknutí Enter uvnitÅ™ formulářového pole, prohlížeč pak formulář odeÅ¡le.
• keydown – stisknutí klávesy může vést k pÅ™idání znaku do pole nebo jiným akcím.
• contextmenu – událost se stane pÅ™i kliknutí pravým tlačítkem, akcí je zobrazení kontextového menu prohlížeče.
• …jsou i další…

Všechny standardní akce je možné zakázat, pokud chceme událost zpracovávat výlučně v JavaScriptu.

Abychom zakázali standardní akci, použijeme buď událost.preventDefault(), nebo return false. Druhý způsob funguje jen pro handlery pÅ™iÅ™azené pomocí on<událost>.

Možnost passive: true metody addEventListener oznamuje prohlížeči, že akce nebude zakázána. To je užitečné pro nÄ›které mobilní události, napÅ™. touchstart a touchmove, abychom sdÄ›lili prohlížeči, že pÅ™ed rolováním nemusí čekat na skončení vÅ¡ech handlerů.

Pokud byla standardní akce zakázána, hodnota událost.defaultPrevented se nastaví na true, v opačném případÄ› je false.