Bonjour à tous,

Je cherche à créer dynamiquement un événement "onclick" sur un lien pour que la fonction confirm() soit appelée.
Voici le code de mon fichier js :

ajoutConfirmVider();

function ajoutConfirmVider()
{
	var node;
	
	node = "ma balise <a>";
	node.addEventListener("click",function(){confirm('êtes vous sur ?')},true);
}

Mon problème, c'est que je ne sais pas comment intercepter la valeur de retour de la fonction confirm, à l'heure actuelle, quoi qu'il réponde l'utilisateur est quand même redirigé vers la cible du lien.

En fouillant un peu j'ai trouvé ceci :

node.addEventListener("click",function(){ return confirm('êtes vous sur ?')},true);

Mais ça ne change rien.

Comment puis-je faire ? Je précise que je ne me soucie pas de la compatibilité avec IE pour le moment.

Merci d'avance pour vos éventuelles solutions.

node.addEventListener("click",function(e){
  if(!confirm('êtes vous sur ?')) {
    e.preventDefault();
    return false;
  }
},false);

Comme ça ?

(J'ai mis false en troisième paramètre car je ne vois vraiment pas à quoi ça te sert de mettre true )

Note : Tu t'en fous d'être compatible IE ?

Ok merci ça marche très bien comme ça, je ne connaissais pas la méthode preventDefault(), c'est parfait.

Citation : Golmote

(J'ai mis false en troisième paramètre car je ne vois vraiment pas à quoi ça te sert de mettre true )

Ok j'ai lu ce tutoriel sur la question de ce fameux troisième paramètre mais très honnêtement je n'ai pas compris ce que ça change.

Citation : Golmote

Note : Tu t'en fous d'être compatible IE ?

Ce script est désigné à un projet de BTS, je ne le mettrai pas en ligne donc dans ce cas oui mais sinon non je ne m'en fous pas même si je suis pas un grand fan de IE.

Je parlais de la compatibilité IE uniquement dans le cadre de ce code, bien entendu.

Pour t'expliquer le fonctionnement du troisième paramètre, on va parler un peu du fonctionnement des événements dans une page web.



Tout d'abord, il faut que tu considères l'arbre DOM qui représente ton document.

Tu as le body, puis dans le body un élément, puis dans cet élément un autre élément, etc.

Donc imaginons que tu as trois divs inclus les uns dans les autres comme ceci :

<div id="div1" style="position:absolute;background:red;left:0;top:0;width:200px;height:200px;">
  <div id="div2" style="position:absolute;background:blue;left:20px;top:20px;width:100px;height:100px;">
    <div id="div3" style="position:absolute;background:yellow;left:30px;top:30px;width:50px;height:50px;"></div>
  </div>
</div>

Lorsque tu vas cliquer sur le div jaune, l'événement 'click' va descendre dans l'arbre DOM, jusqu'au div jaune.
(body -> div1 -> div2 -> div3)
Cette phase s'appelle la "capture".

Ensuite, il atteindra donc le div jaune (div3). On dit qu'il est sur la cible.

Et ensuite, il remontera dans l'arbre.
(div3 -> div2 -> div1 -> body)
Cette phase s'appelle le "bubbling" (je connais pas l'équivalent français ) (L'événement remonte comme une bulle)


Donc à chaque événement, tu as ces trois phases.


Ajoutons maintenant à notre HTML ce code javascript :

window.onload=function() {
  var div1 = document.getElementById('div1'),
  div2 = document.getElementById('div2'),
  div3 = document.getElementById('div3');

  div1.addEventListener('click',function() {
    alert('div1 !');
  },false);
  div2.addEventListener('click',function() {
    alert('div2 !');
  },false);
  div3.addEventListener('click',function() {
    alert('div3 !');
  },false);
};

Tu constates si tu cliques sur le div jaune, que les alert s'affichent dans cet ordre :
div3 !
div2 !
div1 !

Les événements ont donc été déclenchés pendant la phase de "bubbling".

C'est le comportement par défaut.


Le troisième paramètre de addEventListener permet justement de modifier ce comportement. S'il vaut true , il va imposer que l'événement soit déclenché pendant la phase de capture.

Donc si on modifie notre premier événement JS comme ceci :

div1.addEventListener('click',function() {
  alert('div1 !');
},true);

Tu cliques sur le div jaune toujours, et là :
div1 !
div3 !
div2 !


L'événement concernant le div1 a été déclenché pendant la phase de capture.
Les autres pendant la phase de "bubbling".



Est-ce plus clair ?


PS : Tu n'oublieras pas de mettre ton sujet en résolu à l'aide du lien en bas de page

Ok un grand merci c'est très clair !

Il n'y avait donc effectivement aucun interêt à mettre true dans ce cas.