Discussion :

[bronon]

Bonsoir à tous,
Cet AM je bute sur un pb de gestion des évent handlers avec on/off (jQuery 1.71).
mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$j(document).on("mouseout mouseover click", '.aDeplier', function () {        if (!e) var e = window.event;
    console.log('mouseEvent : '+e.type);
    if(e.type == "click"){
        $j(this).off("mouseout", function(){
        console.log('Off : C bon')
    }); 
    $j(this).prev('img').attr({src: '../Images/Soustraire-9px.png'});
} 
syntheseFideplier(this);

Explication : lorsque la souris est soit over soit out sur un objet je déclenche des actions par syntheseFideplier(this) qui fonctionne bien. Les choses se gâtent quand je veux neutraliser le mouseout en clichant sur l'objet en utilisant la méthode off comme conseillé dans http://api.jquery.com/off/.


Si qu'un a une piste d'avance merci

[Bovino]

C'est bien, tu as trouvé la page de la doc. Dommage en revanche que tu ne l'ais pas lue !

Tout d'abord

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (!e) var e = window.event;

Ca te sers à quoi cette instruction ? Un événement jQuery passera toujours en paramètre l'objet event associé.

Sinon, pour supprimer un événement spécifique comme tu le fais, il faut que la fonction associée soit une fonction qui soit elle-même attachée à l'événement ! Dans ton cas, la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function(){
    console.log('Off : C bon')
}

n'est associée à aucun événement.
Ceci dit, même si c'était le cas, ça ne marcherait pas quand même car pour supprimer une fonction spécifique liée à un événement, il faut que cette fonction soit nommée alors que dans ton cas, ce sont des fonctions anonymes qui sont passées.

[bronon]

C'est bien, tu as trouvé la page de la doc. Dommage en revanche que tu ne l'ais pas lue !

Tout d'abord

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (!e) var e = window.event;

Ca te sers à quoi cette instruction ? Un événement jQuery passera toujours en paramètre l'objet event associé.

A rien C juste un reste d'essai antérieur ! dsl

Sinon, pour supprimer un événement spécifique comme tu le fais, il faut que la fonction associée soit une fonction qui soit elle-même attachée à l'événement ! Dans ton cas, la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function(){
    console.log('Off : C bon')
}

n'est associée à aucun événement.
Ceci dit, même si c'était le cas, ça ne marcherait pas quand même car pour supprimer une fonction spécifique liée à un événement, il faut que cette fonction soit nommée alors que dans ton cas, ce sont des fonctions anonymes qui sont passées.

Désolé de te contredire mais j'ai parfaitement lu la doc et j'en ai retenu que

handler(eventObject)
Type: Function()
A handler function previously attached for the event(s), or the special value false.

Ce qui veut dire pour moi qu'une fonction() peut être utilisée ce qui s'avère faux à l'usage j'en conviens !
Maintenant comment je fais pour supprimer l'évènement mouseout en clichant sur l'objet qui a ce eventListener ?
Désolé mais je n'ai pas compris tes explications.
D'avance merci pour ton aide

[Bovino]

Manifestement, tu interprètes mal ce que tu lis.

A handler function previously attached for the event(s), or the special value false.

Comme je te l'indiquais, le paramètre à passer est une fonction qui a déjà été associée à l'événement, ce qui n'est pas le cas dans ton code.
D'autre part, je n'ai jamais dit qu'il ne s'agissait pas d'une fonction... j'ai juste dit qu'utiliser une fonction anonyme n'est pas correct, c'est une référence à une fonction qu'il faut utiliser.
Donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$(element).on('click', function(){alert('foo')});
$(element).off('click', function(){alert('foo')});

ne fonctionnera pas car contrairement à ce que tu sembles croire, même si le code associé est identique, il ne s'agit pas de la même fonction : tu as juste définis deux fonctions anonymes différentes faisant la même chose.
Pour pouvoir supprimer un gestionnaire, il faut passer à .off() une référence à la fonction passée à .on(), par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function affiche(){
    alert('foo');
}
$(element).on('click', affiche);
$(element).off('click', affiche);

Une autre solution est de passer par un namespace pour grouper des événements :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$(element).on('click.action', function(){alert('foo')});
$(element).off('click.action');

mais dans ce cas, le paramètre correspondant au handler est inutile pour les raisons suscitées.

Bref, rien de très nouveau par rapport à ce que dit la doc et notamment les exemples proposés.

[bronon]

Merci pour ta réponse bien explicite et documentée.
Je reviens vers toi rapidement après avoir (essayé) de mettre en oeuvre ta solution namepace.
Encore merci

[bronon]

Décidément j'ai du mal avec ce .off()

j'ai écrit ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$(document).on("mouseout.annulerMO mouseover", '.aDeplier', syntheseFideplier(this) );
$(document).on("click", '.aDeplier', function(){$(this).off('mouseout.annulerMO', false)});

Rien ne fonctionne pourquoi ?

J'ai lu attentivement les exemples donnés par jQuery, je pensais avoir compris mais en fait non.

Grrrr …. Ou est l'erreur ?

[Bovino]

La syntaxe du premier .on() est incorrecte !
Les fonctions de rappel (callback) ou les utilisations cachées de eval().

[bronon]

Oups pardon,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$j(document).on("mouseout.annulerMO mouseover", '.aDeplier', function(){syntheseFideplier(this)});

Ca fonctionne mieux comme ça

j'ai toujours le pb du mouseout

[Bovino]

Tu ne peux pas supprimer un gestionnaire pour un seul élément si tu as fait une délégation d'événement.
Dans ton cas, tu as définit un seul gestionnaire pour l'élément document et lorsque ce gestionnaire est appelé, il va vérifier si l'élément qui a reçu l'événement est du type passé en paramètre (.aDeplier), mais il ne s'agit pour autant que d'un seul gestionnaire, tu ne peux donc pas le désactiver pour un élément .aDeplier spécifique. C'est soit tu désactives pour tous, soit pour aucun.

Une solution pourrait être, au lieu de faire un .off(), de juste supprimer la classe correspondante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(document).on("click", '.aDeplier', function(){$(this).removeClass('aDeplier')});

[bronon]

Mille mercis ça fonctionne nickel de chez nickel!

Ton aide m'a été précieuse !

[bronon]

Je reviens sur mon pb, j'ai remplacé les mouseover et mouseout par hover qui fonctionne bien.
Maintenant je souhaite remplacer dans le on le trigger hover par un trigger spécifique en l'occurrence hoverIntent qui permet de ne déclencher le mouseover que lorsque la souris est vraiment arrêtée sur le dom ce qui évite les apparitions anarchiques lorsque la souris ne fait que traverser le dom.
Donc comment insérer ce trigger spécial dans la méthode on ?

D'avance merci pour tes conseils ou piste !
Cdlt

[Darkaurora]

Bonjour, il te faudra bien réfléchir aux moments et conditions pour lancer ton événement !

La manière à suivre est bête et méchante et tu trouveras une bonne piste ici, mais je le répète tu devras trouver le bon levier pour appeler l'événement.

[bronon]

Merci pour ta réponse,
Mon pb est un peu différent : j'utilise hoverIntent (http://cherne.net/brian/resources/jq...verIntent.html) dans une partie du site de la manière suivante $(#blabla").hoverIntent(fonction(){blabla…})) et qu'il correspond parfaitement à mes besoins.

Je veut faire la même utilisation mais avec on, genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(#blabla").on("hoverIntent", '.css', fonction(){blabla…});

Ce qui ne fonctionne pas!
Qui a une soluce ?
Merci

[Bovino]

Euh... tu peux nous expliquer au juste pourquoi tu tiens absolument à passer par .on() qui n'est pas prévu pour plutôt que d'utiliser le plugin tel qu'il est conçu puisque cela "correspond parfaitement à tes besoins" ?

[bronon]

Oui Bovino je t'explique, la partie du site ou j'utilise ce plug est un menu déroulant classique type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ul > li > ul > li etc

Dans le cas d'aujourd'hui, une autre partie du site, c'est une suite de tables imbriquées (ce site est une reprise dont je ne suis pas à l'origine et je souhaite pas refaire cette partie juste l'améliorer !) donc quand je hover un td j'«append» une sous-table de qq lignes et 2 col, quand je quitte ce td la sous-table est détruite, ahoutch C lourd je sais !
Donc pour éviter les apparitions erratiques des sous-tables je souhaiterai utiliser hoverIntent pour temporiser les actions.
Maintenant si tu as d'autres pistes je suis preneur!
C bon ?

[Bovino]

J'avoue que j'ai un peu de mal à comprendre en quoi ça empêche d'utiliser le plugin dans son contexte "normal" (j'entends par là, le contexte d'utilisation prévu par l'auteur)...

Au pire, ce que tu peux faire si tu as actuellement par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$(element).on('mouseenter', function(){
    // code pour faire apparaitre la table
});
$(element).on('mouseout', function(){
    // code pour faire disparaitre la table
});

tu peux utiliser un timer pour faire ta temporisation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var timer;
$(element).on('mouseenter', function(){
    timer = setTimeout(function(){
        // code pour faire apparaitre la table
    }, 100);  // la valeur 100 (en ms) a adapter à tes besoins
});
$(element).on('mouseout', function(){
    if(timer){
        clearTimeout(timer);
        timer = undefined;
        return true;  // évite d'exécuter le reste du code
    }
    // code pour faire disparaitre la table
});