ajax, javascript, prototype

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!

Ez a bejegyzés rrd billentyűzetéből potyogott ki 2007 június 7. napján 02:06:01-kor. Eddig 1,637 olvasást ért meg. A visszajelzéseket nyomonkövetheted ezzel az RSS feed-el. Véleményt nyilváníthatsz, vagy trackbackolhatsz a saját oldaladon.