JavaScript - Bouton annuler

Bonjour à tous,

Dans formulaire que j'ai développé, j'ai deux boutons - Valider et Annuler.
Si le bouton Valider fonctionne parfaitement, celui pour annuler me pose plus de souci.

Au clic sur ce bouton, une alerte doit s'ouvrir. Si l'utilisateur confirme, il doit être redirigé sur la page "liste_civ".
Je parviens à rediriger l'utilisateur au clic, ou à afficher une alerte, mais pas les deux en même temps. Je me suis tourné vers JavaScript pour résoudre mon problème mais sans succès.

Voici mon code Drupal :

Code:

---

1 2 3 4 5 6 7

drupal_add_js(drupal_get_path('module', 'form_civ') . '/retour_page.js');   $form['retour'] = array( '#type' => 'button', '#value' => t('Annuler'), '#id' => 'retour' );

---

Voici mon code JS :

Code:

---

1 2 3 4 5 6 7 8 9

document.addEventListener("click", retourPage,true);   function retourPage(e){ if (e.button===0){ if (confirm("Etes-vous sûr de vouloir annuler ? ")){ document.location.href="liste_civ"; } } }

---

Le code fonctionne, à un détail près : l'action se déclenche à chaque fois que l'utilisateur clique sur la page, que ce soit sur le bouton, ou dans la page.
Je ne parviens pas à déclencher cette action uniquement sur le clic du bouton !

Est-ce que l'un d'entre vous peut me donner de nouvelles pistes de recherches ?
Merci d'avance

Ton event listener écoute tous les clics sur l'intégralité du document. De plus, ce n'est pas une bonne idée d'intercepter tous les évènements du document comme ça, car ça augmente l'utilisation des ressources du navigateur. Mieux vaut toujours préciser la cible que tu souhaites écouter.

Code:

---

1 2 3 4 5 6 7 8 9

var btn = document.getElementById("retour"); btn.addEventListener("click", retourPage);   function retourPage() { if (confirm("Etes-vous sûr de vouloir annuler ? ")){ document.location.href="liste_civ"; } }

---

Merci Tsilefy pour ta réponse et pour ta rapidité.

Je viens de tester ton code, et malheureusement celui-ci ne fonctionne pas chez moi. L'alerte s'ouvre mais ne redirige pas l'utilisateur s'il confirme.

J'ai tenté de remplacer le "click" par "mousedown" dans l'EventListener, et avec ce code, le bouton réagit comme je le souhaite.

Code:

---

1 2 3 4 5 6 7 8

var btn = document.getElementById("retour"); btn.addEventListener("mousedown", retourPage);   function retourPage() { if (confirm("Etes-vous sûr de vouloir annuler ? ")){ document.location.href="liste_civ"; } }

---

Du coup, mon problèmer est résolu, mais j'aimerai comprendre pourquoi le "click" ne fonctionne pas...
Car ton code a été testé sur une page HTML/PHP simple, et le bouton réalise l'action que l'on attend de lui.
Est-ce que le problème vient de Drupal, qui gère le clic d'un bouton différemment ?

En tout cas, merci encore pour ta réponse.

Bizarre. Je dirais que le souci vient plus de ton navigateur que drupal. C'est pour ça qu'on utilise jQuery, qui uniformise les comportements de tous les navigateur, au lieu d'écrire un code adapté pour chaque navigateur qui existe.

En fait, j'ai également testé avec une fonction en JQuery, mais celle-ci me donnait le même résultat. Impossible à revenir en arrière avec "click" mais OK avec "mousedown".
Et le résultat était le même sous différents navigateurs, que j'utilise une fonction JS ou JQuery.
C'est assez déroutant, mais le code fonctionne !

En tout cas merci pour tes réponses.