JavaScript – suštění příkazu při kliknutí myši

23. května 2000

•

Vážení čtenáři, vítám vás v jedenáctém díle seriálu o JavaScriptu. V tomto díle se budu věnovat tomu, jak spustit příkaz, když kliknu myší ve webové stránce. Postupně rozeberu, jak zareagovat na kliknutí myší na tlačítko, odstavec a obrázek.

Dost teorie, a zkusme hned nějaký příklad. Již dříve jsem používal spouštění příkazu při kliknutí myší na tlačítko. Bylo to zapsané asi takto:

<html>
<head>
<title>Kliknutí na tlačítko</title>
</head>
<body>
<form>
<input type="button" value="Klikni sem" onClick="alert(‚Klik!‘);">
</form>
</body>
</html>

A takto to vypadá:

Pokud tedy chcete, aby byl spuštěn nějaký příkaz při kliknutí na tlačítko, napište ho jednoduše za onClick= do uvozovek. Atribut onClick ale nemusíte použít jenom u tlačítka, ale třeba i u odstavce, obrázku, apod. Tak je to alespoň psáno v normě pro HTML jazyk verze 4 (viz stránky W3 consorcia). Bohužel, prohlížeče Netscape si z norem HTML moc starosti nedělají, a navíc se již několik let nevyvíjí. A tak v Netscape vám kliknutí bude opravdově pracovat jenom u toho tlačítka. Naštěstí je tu už nástupce Netscape, který se jmenuje Mozilla, a je k dispozici zdarma a pro všechny možné platformy včetně Linuxu a Windows.

To jsem ale odbočil. V internet Exploreru a každém jiném prohlížeči, který dodržuje normu HTML verze 4 můžete snadno zareagovat třeba při kliknutí na odstavec pomocí tohoto úseku HTML:

<p onClick="alert(‚Kliknuto na odstavec‘);">Pokud kliknete na tento odstavec, uvidíte okno.</p>.

A tady si to můžete zkusit (nepracuje v Netscape):

Pokud kliknete na tento odstavec, uvidíte okno.

O trochu níže jsem trochu zkritizoval prohlížeče Netscape. Protože se ale zatím používají, je potřeba se s nimi také vypořádat. Naštěstí i tam lze jistým trikem zařídit, aby se dalo kliknout na odstavec, nebo obrázek. Ale musí se na to trochu jinak (tento způsob samozřejmě pracuje i v ostatních prohlížečích, nejenom v Netscape):

<a href="javascript:void alert(‚Kliknuto na odstavec‘);"
style="text-decoration:none;font-style:normal;color:black;">
<p>Pokud kliknete na tento odstavec, uvidíte okno.</p>
</a>

A tady si to můžete zkusit (pracuje i v Netscape):

Pokud kliknete na tento odstavec, uvidíte okno.

Vlastní vysvětlení triku je jednoduché. V HTML totiž existují hypertextové odkazy pomocí značky <a>. A ty odkazy se chovají tak, že při kliknutí na něj se něco provede (nejčastěji otevře jiná stránka, ale klidně se třeba spustí i příkaz v JavaScriptu). Takže jsem celý odstavec uzavřel mezi <a> a </a>. Tím jsem získal možnost reagovat na kliknutí na odstavec i v Netscape. Jenomže mi vznikl druhý problém, a to je ten, že odstavec mi zobrazí podtrženým písmem, kurzívou a modře. Abych se vyhnul i tomu, použil jsem kaskádové styly CSS, kterým jsem nastavil vzhled odstavce. Podrobnější popis kaskádových stylů CSS běží v seriálu v tomto časopisu a proto vás odkazuji na tento seriál.

Jak sami vidíte, v Netscape řešit kliknutí na odstavec není nic moc. Ještě častým problémem, který se řeší, je spuštění příkazu v JavaScriptu při kliknutí na obrázek. Pokud nepoužívate Netscape, snadno to vyřešíte pomocí onClick=. Protože ale většina z nás stojí o čtenáře všech prohlížečů, je potřeba to napsat tak, aby to pracovalo i v Netscape. Naštěstí to jdete podobným trikem jako u odstavce, a dokonce se ani nemusejí používat kaskádové styly CSS:

Princip je v tom, že vlastní obrázek je uzavřen mezi značkami <a> a </a>. Protože ale prohlížeč by obrázek ohraničil modrým obdélníkem, použil jsem u značky <img> atribut border nastavený na nulu, který tento efekt ruší. A pracuje to i v Netscape! Zde si to můžete zkusit (stačí kliknout na obrázek):