Amikor szeretnénk kicsit kifinomultabb JavaScript / Ajax alkalmazásokat leprogramozni, akkor előbb-utóbb (előbb) használni fogunk eseménykezelőket. Ha szeretnénk diszkréten kezelni az eseményeket, és ugyanakkor biztosítani, hogy az alkalmazás JavaScript nélkül is működjön, akkor pedig szükségünk lesz arra a technikára amivel elérhetjük, hogy a böngészőben bekövetkezett eseményt (mondjuk egy kattintást) miután lekezeltük a saját eseménykezelőnkkel, meg-nem-történté tegyük, hogy a böngésző saját eseménykezelője ne hajtódjon végre. Erre a weben sok példát találhatunk, mindenhol azt írják, hogy az eseménykezelőben egy
return false;
elegendő. Ezzel csak az a baj, hogy nem működik. Legalábbis nem minden böngészőben.
A probléma
Azt szeretnénk megoldani, hogy egy linkre való kattintáskor, vagy egy form submit gombjára való kattintáskor végrehajtódjon a saját eseménykezelőnk, a böngészőjé pedig ne. Erre a weben ilyesmi példákat találhatunk:
-
<a href="akarmi.html" onClick="esemenykezelo(); return false;">
Ez a megoldás működőképes ugyan, de nem diszkrét megoldás, mivel az alkalmazás működési elve bele van kódolva a html-be.
-
Event.observe(link, 'click', esemenykezelo); function esemenykezelo() { //itt csinaluk valamit és utánna return false; }
Ez már egy szép diszkrét megoldás, csak sajnos az eseménykezelő elveszti a scope-ot és ezért az objektum nem kapja meg a visszatérési értéket. Ezen sajna nem segít a Prototype library bindAsEventListener függvénye sem.
-
Event.observe(link, 'click', esemenykezelo); link.onclick = function() {return false;};
Ronda és működőképes. Annyi probléma van vele, hogy egy objektum egy eseméynéhez két külön eseménykezelő van kapcsolva, ami a fenntarthatóság szempontjából nem a legegészségesebb.
-
Event.observe(link, 'click', esemenykezelo); function esemenykezelo() { //itt csinaluk valamit és utánna Event.stop(e); }
A Prototype library adja az
Event.stop
eljárást ami pont ezt a problémát hivatott megoldani, de a Safari (2.0.4) és az Opera (9.10) lesajnálja próbálkozásnkat és nem állítja le az eseményt.
A megoldás
Event.observe(link, 'click', esemenykezelo); function esemenykezelo(e) { //itt csinaluk valamit és utánna Event.stop(e); return false; }
Pár órányi kísérletezgetés után az Event.stop
és a return false;
kombinációja az alábbi böngészőkben meghozta az áhított alapértelmezet eseménykezelő felfüggesztését.
- Firefox (2.0.0.4)
- Internet Explorer (6.0)
- Opera (9.10)
- Safari (2.0.4)
- Camino (1.0.4)
Ha valakinek van jobb,szebb, elegánsabb vagy működőképesebb keresztplatformos megoldása akkor ne habozzon és JólMegmondja plíz!
Nagyon jó, használható leírás, aztán ‘utánna’. Hitelét is veszítette az egész… 🙁
Carter: megoszthatnád velem is, hogy mi a baj.
Pingback:WebMánia » JavaScript eseménykezelés ajax következményekkel