Események és return false

ajaxAmikor 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!

3 thoughts on “Események és return false

  1. Pingback: WebMánia » JavaScript eseménykezelés ajax következményekkel

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.