Myší události – základní syntaxe

30. listopadu 1999

•

Výhoda klientských skriptů spočívá v tom, že dovedou okamžitě reagovat na změny provedené uživatelem při práci s načteným HTML souborem. Touto událostí, která odstartuje určitou proceduru může být například pohyb nebo kliknutí myší.

Kromě obecně známých událostí jako je např. onClick, onMouseOver nebo onMouseOut však existuje řada dalších možností, jak reagovat na práci uživatele s myší. Některé z nich Vám dnes představím – čtvrté verze prohlížečů MSIE a NN totiž přinesly řadu dalších nových spouštěcích příkazů, které mnoho z vas nezná. K těm, které podporují oba nejrozšířenější browsery (MSIE, NN) patří:

onDblClick – skript je proveden po dvojkliku myší na daný objekt. Netscape podporuje dvojklik na odkaz, tlačítko nebo areatext (tagy <a>,<input>,<area>), u MSIE můžete dvojklik využít v podstatě u všech tagů.

onMouseDown – událost generovaná na základě stisknutí tlačítka myši. Na rozdíl metody onClick, tato událost umožňuje využít všech tří tlačítek myši. Internet Explorer umožňuje využít tohoto příkazu téměř u všech tagů, Netscape pouze u odkazu, tlačítka a dokumentu (tagy <a>,<body>,<input>).

onMouseUp – událost, která doplňuje předešlou. Funkce je volána poté, co uživatel pustí zmáčknuté tlačítko myši. Lze ji samozřejmě použít u stejných tagů jako příkaz onMouseDown.

onMouseMove – funkce je generovaná na základě pohybu myši. Netscape podporuje její používání pro objekt document a window.

Objekt Event

Uvedené příkazy však opravdu nejlépe využijete teprve ve spojení s objektem Event. Pomocí něj lze totiž přímo zjistit parametry určité události, např. které tlačítko bylo zmáčknuto, souřadnice kursoru myši apod. Využívání objektu Event má však jednu velkou nevýhodu – tou je naprostá nekompatibilita prohlížečů. Proto si uvedeme pouze vlastnosti, u kterých existují vzájemné ekvivalenty. Akce provedené myší můžeme detekovat pomocí těchto vlastností:

which (NN), button (IE) – vrací hodnotu zmačknutého tlačítka. Při kliknutí na levé tlačítko je vrácena hodnota „1“, na pravé u MSIE „2“ a NN „3“, střední tlačítko pak vrací „4“ pro MSIE a „2“ pro NN. V případě, že ke kliknutí nedojde, vrací oba prohlížeče „0“.

clientX(IE), pageX (NN) – vrací hodnotu horizontální souřadnice kurzoru myši v okamžiku události (např. kliknutí) vzhledem k levému okraji prohlíženého okna.

clientY(IE), pageY (NN) – hodnota vertikální souřadnice kurzoru myši vzhledem k hornímu okraji prohlíženého okna.

screenY(IE), screenX (NN) – horizontální souřadnice kurzoru myši vzhledem k levému rohu obrazovky uživatele.

screenX(IE), screenY (NN) – vertikální souřadnice kurzoru myši vzhledem k hornímu rohu obrazovky uživatele.

type – vrací název události, která byla provedena – např. pro kliknutí je to „click“.

Praktická ukázka

Jak vidíme, rozdíly mezi jednotlivými prohlížeči jsou značné, proto si možnosti využití objektu event ve spojení se spouštěcími událostmi ukážeme na následující jednoduché ukázce. Ta umožní nadefinovat různé upozorňující zprávy podle toho, které tlačítko myši použijete pro kliknutí na uvedený odkaz

Zdrojový kód tohoto příkladu vypadá následovně:

<a href=“ukazka.htm“ onMouseDown=“return zprava(event.which);“>Ukázka 1</a>
<script language=“JavaScript“>
<!–
function zprava(en)
{
// identifikace prohlížeče
var ver = parseInt(navigator.appVersion);
var browser = navigator.appName;
//blok příkazů pro NN
if (ver >= 4 & browser == „Netscape“) {var tlacitko = en} ;
// blok příkazů pro IE
if (ver >= 4 & browser == „Microsoft Internet Explorer“) {
var tlacitko = event.button
//převedení získaných hodnot tak, aby byly kompatibilní s NN
if (tlacitko ==2) {tlacitko = 3};
if (tlacitko ==4) {tlacitko = 2};
}
if (tlacitko == 1) {alert („Klikli jste na levé tlačítko myši“)};
if (tlacitko == 2) {alert („Klikli jste na prostřední tlačítko myši“)};
if (tlacitko == 3) {alert („Klikli jste na pravé tlačítko myši“)};
return false;
}
// –>
</script>

Přestože se jedná o velmi jednoduchý skript, vidíme, že díky nekompatibilitě nám narostl do relativně velkých rozměrů. Jednotlivé části si nyní vysvětlíme. Pomocí příkazu onMouseDown, který reaguje na zmáčknutí tlačítka myši je provedena funce zprava(). Na začátku této procedury je nutné nejprve zjistit verzi a název prohlížeče (příkazy navigator.appVersion, navigator.appName). Podle zjištěných údajů pak využijeme objekt event pro identifikaci zmáčknutého tlačítka – v MSIE pomocí vlastnosti event.button, v NN event.which (u NN je nutno objekt event nadefinovat již při spuštění procedury, tak jak je tomu v tomto příkladu.). Protože však IE a NN vrací různé hodnoty pro jednotlivá tlačítka, je nutné je sjednotit a přiřadit jim upozorňující zprávy (příkaz alert()).

Závěrem

Jak je vidět z našeho krátkého přehledu, JavaScript 1.2 přinesl řadu důležitých zlepšení, které umožňují větší interaktivitu stránek s uživatelem. Proto budeme v tomto seriálu, kterým jsme tímto článkem započali, pokračovat a přineseme Vám řadu dalších skriptů, které zcela určitě využijete při vytváření webových stránek. Vývoj tohoto seriálu však můžete ovlivnit i Vy: stačí když nám napíšete, co vás zajímá a my se pokusíme Vaše náměty zpracovat.