Propagation des évènements

bonjour a tous , j'ai un soucis que je n'arrive pas a résoudre :

Code:

---

<div id="1"><div id="2"><input type="checkbox" /></div></div>

---

voila pour le code :)

je souhaite binder 2 évènement mais lorsque que bind un click sur div id 1 et que je click sur la checkbox , l'évènement est déclenché :-/

quelqu'un aurait-il une idée ?

( ps j'ai essayé les stopPropagation mais rien n'y fait ... )

bonsoir,

est-ce que ceci peut répondre à ton problème ?


[edit]
Je n'ai pas vu que j'étais dans le forum JQuery :(
Mais je laisse ma réponse au cas où... ;)
[/edit]

Salut auteur , ça faisait un moment ;)

je pense effectivement que le drapeau est la seule solution ^^

merci encore ^^

avec jquery passe par le data pour y mettre ton flag ??

Ceci dit, je suis étonné que stopPropagation() ne fonctionne pas :?
Peut-être avec un return false dans le gestionnaire de l'input.
Au pire, utilise Event.target pour déterminer quel élément à reçu l'événement.

Bonjour

Un ID doit être unique et il doit commencer par un caractère alphabétique (Norme W3C HTML 4) !

Code:

---

1 2 3 4 5 6 7

<div id="monID1"> <p>Un mot pour remplir</p> <div id="monID2"> <input type="checkbox" /> <p>Un mot pour remplir</p> </div> </div>

---

Citation:

---

Envoyé par Bovino

Au pire, utilise Event.target pour déterminer quel élément à reçu l'événement.

---

currentTarget() pour obtenir la division et target() pour l'élément de la division qui a reçu le clic.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$("#monID1").click(function(e){ console.log("monID1, target = ", e.target, ", currentTarget = ", e.currentTarget);   return false; });   $("#monID2").click(function(e){ console.log("monID2, target = ", e.target, ", currentTarget = ", e.currentTarget);   return false; });   $("#monID2 > input[type='checkbox']").click(function(e){ console.log("input, target = ", e.target, ", currentTarget = ", e.currentTarget);   return false; });

---

Citation:

---

Envoyé par le_chomeur

Salut auteur , ça faisait un moment ;)

---

Salut. Effectivement cela fait un bout temps ;) Mais je suis toujours là

Citation:

---

Envoyé par Bovino

Au pire, utilise Event.target pour déterminer quel élément à reçu l'événement.

---

Citation:

---

Envoyé par danielhagnoul

currentTarget() pour obtenir la division et target() pour l'élément de la division qui a reçu le clic.

---

je croyais que ces fonctions n'étaient pas compatibles avec tous les navigateurs :koi:

Citation:

---

Envoyé par Auteur

je croyais que ces fonctions n'étaient pas compatibles avec tous les navigateurs :koi:

---

Là on parle des propriétés de l'objet Event de jQuery, donc si, la syntaxe est uniformisée et compatible ;)

Citation:

---

Envoyé par Auteur

je croyais que ces fonctions n'étaient pas compatibles avec tous les navigateurs :koi:

---

C'est la version jQuery : http://api.jquery.com/category/events/event-object/

Citation:

---

Envoyé par danielhagnoul

Bonjour

Un ID doit être unique et il doit commencer par un caractère alphabétique (Norme W3C HTML 4) !

Code:

---

1 2 3 4 5 6 7

<div id="monID1"> <p>Un mot pour remplir</p> <div id="monID2"> <input type="checkbox" /> <p>Un mot pour remplir</p> </div> </div>

---

---

8O 8O 8O

Daniel je me permet de souligner que j'étais modo sur DVP et que je sais tout ça lol il s'agit d'un bout de code uniquement pour illustrer mon problème ;)

Citation:

---

Envoyé par danielhagnoul

currentTarget() pour obtenir la division et target() pour l'élément de la division qui a reçu le clic.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$("#monID1").click(function(e){ console.log("monID1, target = ", e.target, ", currentTarget = ", e.currentTarget);   return false; });   $("#monID2").click(function(e){ console.log("monID2, target = ", e.target, ", currentTarget = ", e.currentTarget);   return false; });   $("#monID2 > input[type='checkbox']").click(function(e){ console.log("input, target = ", e.target, ", currentTarget = ", e.currentTarget);   return false; });

---

---

Au final j'ai fait beaucoup plus simple qu'un flag :
- Div 1 positionnéé en absolute avec un z-index à 1
- Div 2 positionnée en absolute a l'extérieur de Div 1 et avec un z-index à 2 :)

pour le stopPropagation j'ai pas mal recherché le pourquoi cela ne fonctionnait pas et je n'ai pas trouvé de solution :(

Pour moi, stopPropagation() fonctionne :

http://jsfiddle.net/sWcv9/

html:

Code:

---

<div id="monID1"> <p>Un mot pour remplir</p> <div id="monID2"> <input type="checkbox" /> <p>Un mot pour remplir</p> </div> </div>

---

jquery:

Code:

---

1 2 3 4 5 6

$("#monID1").click(function(e){ alert('pwet'); }); $("#monID2 > input[type='checkbox']").click(function(e){ e.stopPropagation(); });

---

effectivement sur cet exemple cela fonctionne mais sur mon écran ( un peu plus complexe ) les click sur les checkbox sont bindé en live après avoir été créer suite a une requète en ajax , est ce cela le problème ?

je vais vérifier ...

salut,

oui.
Lorsque tu es en live, tu choppes l'event une fois qu'il est remonté à document.
Donc si tu es bindé normalement dans ton div, tu vas d'abord chopper l'event dans le div, et apres dans l'input!

Du coup, tu devrais effectivement vérifier le Event.target lorsque tu reçois l'événement sur la div ;)

Merci pour ce complément d'info , j'avais un doute sur le bind en live ^^
Bovino , yes je dois vérifier d'ou provient l'évènement ^^

merci à tous :)

Citation:

---

Envoyé par le_chomeur

Daniel je me permet de souligner que j'étais modo sur DVP et que je sais tout ça lol il s'agit d'un bout de code uniquement pour illustrer mon problème ;)

---

c'est ça, c'est ça :roll: Tu t'es planté dans ton bout de code et puis c'est tout :toutcasse:

:dehors:

Citation:

---

Daniel je me permet de souligner que j'étais modo sur DVP et que je sais tout ça

---

c'est pas une raison ...
regarde moi je suis bien modo ^^

Pour revenir à live(), il est attaché par défaut à la racine du document, mais il est possible de préciser le contexte :

Code:

---

$('#div2', $('#div1').live('click', callback));

---

mais le mieux reste d'utiliser delegate() ;)

Citation:

---

Daniel je me permet de souligner que j'étais modo sur DVP et que je sais tout ça lol il s'agit d'un bout de code uniquement pour illustrer mon problème

---

Une excellente raison pour donner le bon exemple au débutant qui lira vos messages !

Citation:

---

je souhaite binder 2 évènement mais lorsque que bind un click sur div id 1 et que je click sur la checkbox , l'évènement est déclenché :-/

---

Si la question n'est pas explicite et posée dans un français correct, "binder 2 évènement", il ne faut pas s'attendre à des miracles.

Si la question n'est pas complète, si le code donné ne reflète pas le véritable problème la solution proposée ne peut résoudre le problème !

Je me permet de souligner le fait qu'en général les initiés comprendront :)

Bonsoir

Citation:

---

Je me permet de souligner le fait qu'en général les initiés comprendront :)

---

Monsieur le_chomeur, professionnel, avez-vous dit ! :D

Il est vrai que chimiste de profession, je ne suis en informatique qu'un autodidacte confiné à domicile pour raisons médicales. Il me manquera donc toujours l'ambiance des cours et des bureaux où l'on cultive l'art du franglais pour paraître plus savant que son voisin. Il est vrai aussi, étant mon seul maître, que j'ai le luxe de pouvoir rejeter les langages informatiques qui me déplaisent. Dans le domaine du web, PHP est l'exemple parfais de ce que je déteste.

Pour en revenir au jQuery et à votre "binder un événement", je crois avoir compris. Mais sans précision supplémentaire ou une boule de cristal en ordre de marche, on supposera que Monsieur le professionnel parle de la forme courante d'interception d'un événement en jQuery.

Que Monsieur le_chomeur me permette de lui rappeler qu'il existe en jQuery trois manières d'intercepter un événement :

1) bind : .bind( eventType, [eventData,] handler(eventObject) )
et sa forme abbrégée : .eventType( [eventData,] handler(eventObject) )
2) live : .live( eventType, eventData, handler )
3) delegate : .delegate( selector, eventType, eventData, handler )

Soyez sûr, Monsieur, qu'à l'avenir je vous laisserais discourir entre gens du même monde.

D'ailleurs, pour m'en reposer un peu, je vais prendre un mois de vacances studieuses afin, entre autres activités, d'approfondir mon étude et ma pratique du langage Python.