Evénement jQuery : Return False, preventDefault() ou bien ?

Dans jQuery Events: Stop (Mis)Using Return False, Douglas Neiner nous explique, avec moult exemples, toutes les subtilités relatives aux événements dans jQuery. Une des premières choses que l’on apprend en Javascript est d’empêcher les comportements par défaut liés aux liens ou aux formulaires (le lien sur lequel on l’applique n’est pas suivi par le navigateur, le formulaire ne « submit » plus, etc.).

Typiquement, ça donne le résultat suivant…

$("a.toggle").click(function () {
    $("#mydiv").toggle();
    return false; // Prevent browser from visiting `#`
});

… alors qu’on cherche généralement à obtenir quelque chose comme :

$("a").click(function (e) {
    // e == our event data
    e.preventDefault();
});

Le premier exemple changera bien la visibilité de #mydiv sans pour autant nous amener jusqu’à l’ancre #mydiv. Ce que l’on sait moins, c’est que return false provoque trois effets : preventDefault(), stopPropagation() et stopImmediatePropagation() !

J’avoue que ces notions un peu complexes me donnent parfois mal à la tête. Si quelqu’un(e) pouvait compléter le deuxième exemple pour arriver au même résultat que le premier, je suis preneur. Merci d’avance 😉

Webographie

http://www.w3.org/TR/[…]#Events-Event-preventDefault — merci à Anthony Ricaud (@rik24d) pour avoir partagé cette ressource avec tact et gentillesse.