Onclick sur un bouton contenant un élément <p></p>

Bonjour,

Si je fais un bouton sur ma page <div id='monbouton' onclick='mafonction(event)'>MON BOUTON</div>, tout se passe bien.

Cependant, si je transforme mon bouton de cette façon ( dans un but de centrer correctement le contenu du bouton )

<div id='monbouton' onclick='mafonction(event)'><p>MON BOUTON</p></div> , si je clique sur le texte, le bouton réagit mais n'envoie pas l'id correct, il me semble que tout se passe comme si c'est l'élément p qui réagit.

Comment faire pour récupérer l'id du div qui doit réagir au clic.

Salut

Et si tu mets l'action click sur le <P><div id='monbouton'><p onclick='mafonction(event)'>MON BOUTON</p></div> ?

Merci pour votre réponse, mais cela ne corresponds pas à ce que je souhaite.

Dans ce cas, seul le texte est actif, le but est que l'ensemble du bouton soit actif.

Bonjour,
commence par supprimer la gestion du onclick du HTML, on l’enlève du contenu de la balise et utilise addEventListener pour affecter une action à l’événement click sur ton élément.

Code:

---

1 2 3 4 5

<div id="monbouton"> <!-- là tu mets ce que tu veux --> </div>

---

et ensuite tu incorpores le script suivant, après la déclaration de ton élément dans le HTML, :

Code:

---

1 2 3 4 5

const oBtn = document.getElementById("monbouton"); oBtn.addEventListener( "click", function (ev) { console.log("élément cliqué :", this); console.log("détails e :", ev); });

---

Bonjour, Le code HTML est généré au vol via AJAX, le fait d'ajouter à mes balises les évènements dans le code HTML me facilite la tâche, sinon, il faudrait que j'envoie le code HTML et ensuite attacher à tous les éléments les évènements associés.

Effectivement, il y a une différence et je ne vous cache pas que cela m'ennuie.

J'ai fait donc 3 boutons et je suis perplexe, dans votre exemple, j'ai un élément this.id qui donne l'id du div dans tous les cas et target.id qui n'a la valeur du div que si je clique en dehors de l'élément <p>

Dans les autres cas, il semble que this.id est undefined, et target.id se comporte de la même façon.

Je joins le code et j'espère que vous avez une idée.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

<style> /* pour centrer dans le bouton, il faut ajouter un élément <p> */ .my_btn {         display:flex;         margin:3px;         padding:3px;         font:bold 20px Arial;         background:#f5f5f5;         color:#555;         border-radius:3px;         border:1px solid #555;         box-shadow:1px 1px 3px #999;         cursor:pointer;         text-align:center;         height:40px; }   .my_btn p {         text-align: center;         margin:auto; } </style>       <div id="monbouton" class='my_btn'> <p>TEST</p> </div>   <div id="monbouton2" class='my_btn' onclick="f(event)" > <p>TEST 2</p> </div>   <div id="monbouton3" class='my_btn'> <p>TEST 3</p> </div>     <script> const oBtn = document.getElementById("monbouton"); oBtn.addEventListener( "click", function (ev) {         if( !ev ) ev = window.event;     var target = ev.target || ev.srcElement;                 alert("élément cliqué :"+this+' '+this.id+' '+target.id);         alert("détails e :"+ev); });   const oBtn2 = document.getElementById("monbouton3"); oBtn2.addEventListener("click",function (ev) {f(ev)});   function f(ev) {         if (!ev ) { ev = window.event; alert("no ev"); }     var target = ev.target || ev.srcElement;           alert("élément cliqué sur test 2 :"+this.id+' '+target.id);         alert("détails e :", ev);   }

---

En analysant le contenu des variables via l'outil de développement de Chrome, j'ai vu une propriété qui semble être la solution.
Il s'agit de ev.currentTarget.id.

merci à NoSmoking qui m'a mis sur la piste

Tu n'auras pas forcément le résultat escompté avec ev.currentTarget.id.
Concernant ton code il te faut factoriser pour ne pas faire de la duplication de code, par exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

// récup. des éléments ayant la class my-btn pour boucler dessus const oBtns = document.querySelectorAll(".my_btn"); oBtns.forEach(function (el) { el.addEventListener("click", function (ev) { // call() pemet d'utiliser « this » dans la fonction appelée // et qui ne sera autre que « e » fct.call(el, ev); }); });   function fct(ev) { console.log("-> :", this.id); }

---

jour

si c'est l'id du parent qui est recherche la syntaxe est

Code:

---

ev.currentTarget.parentNode.id

---

le click se propage des enfants aux parents ...
tu peux boucler sur les parents de l'élément clické jusqu'à trouver un élément de class "btn" par exemple et récupérer son id

Citation:

---

Envoyé par NoSmoking

Tu n'auras pas forcément le résultat escompté avec ev.currentTarget.id.

---

je n'ai pas retrouvé le cas où cela c'était produit :calim2: ...

Donc autant utiliser currentTarget qui présente l'avantage de bien récupérer l'élément déclencheur lors de l'utilisation d'une « arrow function », alors que this est le contexte d'exécution.

Code:

---

1 2 3 4 5 6 7

const oDiv = document.querySelector("div"); oDiv.addEventListener("click", (e) => { console.log("(1)", this.tagName); console.log("(2)", e.currentTarget.tagName); }); //>> (1) undefined //>> (2) DIV

---

alors que

Code:

---

1 2 3 4 5 6 7

const oDiv = document.querySelector("div"); oDiv.addEventListener("click", function (e) { console.log("(1)", this.tagName); console.log("(2)", e.currentTarget.tagName); }); //>> (1) DIV //>> (1) DIV

---

Citation:

---

Envoyé par SpaceFrog

le click se propage des enfants aux parents ...
tu peux boucler sur les parents de l'élément clické jusqu'à trouver un élément de class "btn" par exemple et récupérer son id

---

Bonjour, effectivement, je pensais à une solution de ce type au départ, mais currenTarget est parfait dans mon cas