Discussion :

[exsit]

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.

[ProgElecT]

Salut

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

[exsit]

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.

[NoSmoking]

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 html :

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

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 :

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

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);
});

[exsit]

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 HTML :

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

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);
 
}

[exsit]

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

[NoSmoking]

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 :

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

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);
}

[melka one]

jour

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

Code :

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

ev.currentTarget.parentNode.id

[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

[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 ...

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 :

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

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 :

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

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

[exsit]

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