Comment afficher une boîte de dialogue de confirmation en cliquant sur un lien?

je veux que ce lien ait un dialogue JavaScript qui demande à l'utilisateur " êtes-vous sûr? Y / N ".

<a href="delete.php?id=22">Link</a>

si l'utilisateur clique" Oui", le lien devrait se charger, si" non " rien ne se produira.

je sais comment faire cela dans les formulaires, en utilisant onclick qui exécute une fonction qui retourne true ou false . Mais comment faire avec un lien <a> ?

202
demandé sur Xufox 2012-05-05 18:34:47

8 réponses

Inline gestionnaire d'événement

de la manière la plus simple, vous pouvez utiliser la fonction confirm() dans un gestionnaire en ligne onclick .

<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>
"151980920 Avancée" gestion des événements

mais normalement vous aimeriez séparer votre HTML et Javascript , donc je suggère que vous n'utilisez pas de gestionnaires d'événements en ligne, mais mettez une classe sur votre lien et ajoutez un écouteur d'événements à elle.

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<script type="text/javascript">
    var elems = document.getElementsByClassName('confirmation');
    var confirmIt = function (e) {
        if (!confirm('Are you sure?')) e.preventDefault();
    };
    for (var i = 0, l = elems.length; i < l; i++) {
        elems[i].addEventListener('click', confirmIt, false);
    }
</script>

cet exemple ne fonctionnera que dans les navigateurs modernes (pour les systèmes plus anciens, vous pouvez utiliser attachEvent() , returnValue et fournir une implémentation pour getElementsByClassName() ou utiliser une bibliothèque comme jQuery qui vous aidera avec les problèmes entre navigateurs). Vous pouvez en savoir plus sur cette méthode avancée de gestion d'événements sur MDN .

jQuery

j'aimerais rester loin d'être considéré comme un fanboy jQuery, mais la manipulation de DOM et la gestion d'événements sont deux domaines où il aide le plus avec les différences de navigateur. Juste pour le plaisir, voici à quoi cela ressemblerait avec jQuery :

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<!-- Include jQuery - see http://jquery.com -->
<script type="text/javascript">
    $('.confirmation').on('click', function () {
        return confirm('Are you sure?');
    });
</script>
463
répondu kapa 2012-05-05 15:04:17
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>
13
répondu coder 2013-07-25 20:03:56

je suggère d'éviter le JavaScript en ligne:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        var check = confirm("Are you sure you want to leave?");
        if (check == true) {
            return true;
        }
        else {
            return false;
        }
    };
}​

js Fiddle demo .

ci-dessus mis à jour afin de réduire l'espace, tout en conservant la clarté/de la fonction:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        return confirm("Are you sure you want to leave?");
    };
}

js Fiddle demo .

une mise à jour un peu tardive, pour utiliser addEventListener() (comme suggéré, par bažmegakapa , dans les commentaires ci-dessous):

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}
var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].addEventListener('click', reallySure);
}

js Fiddle demo .

la fonction ci-dessus lie une fonction à l'événement de chaque lien individuel; ce qui est potentiellement très dispendieux, quand vous pourriez lier le traitement d'événement (en utilisant la délégation) à un élément ancêtre, tel que le suivant:

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}

function actionToFunction (event) {
    switch (event.target.tagName.toLowerCase()) {
        case 'a' :
            reallySure(event);
            break;
        default:
            break;
    }
}

document.body.addEventListener('click', actionToFunction);

js Fiddle demo .

parce que la gestion de l'événement est body élément, qui contient normalement un hôte d'autres éléments cliquables, j'ai utilisé une fonction intérimaire ( actionToFunction ) pour déterminer ce qu'il faut faire avec ce clic. Si l'élément cliqué est un lien , et a donc un tagName de a , la manipulation de clic est passée à la fonction reallySure() .

, les Références:

13
répondu David Thomas 2017-05-23 11:47:20

vous pouvez aussi essayer ceci:

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
    Link Text
</a>
1
répondu Wolfack 2017-07-19 05:28:10

cette méthode est légèrement différente de l'une ou l'autre des réponses ci-dessus si vous attachez votre gestionnaire d'événements en utilisant addEventListener (ou attachEvent).

function myClickHandler(evt) {
  var allowLink = confirm('Continue with link?');
  if (!allowLink) {
    evt.returnValue = false; //for older Internet Explorer
    if (evt.preventDefault) {
      evt.preventDefault();
    }
    return false;
  }
}

vous pouvez attacher ce handler avec l'un ou l'autre:

document.getElementById('mylinkid').addEventListener('click', myClickHandler, false);

ou pour les versions plus anciennes d'Internet explorer:

document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);
0
répondu Chad Killingsworth 2012-05-05 14:46:40

juste pour le plaisir, je vais utiliser un seul événement sur l'ensemble du document au lieu d'ajouter un événement à tous les tags d'ancrage:

document.body.onclick = function( e ) {
    // Cross-browser handling
    var evt = e || window.event,
        target = evt.target || evt.srcElement;

    // If the element clicked is an anchor
    if ( target.nodeName === 'A' ) {

        // Add the confirm box
        return confirm( 'Are you sure?' );
    }
};

cette méthode serait plus efficace si vous aviez de nombreuses étiquettes d'ancrage. Bien sûr, il devient encore plus efficace lorsque vous ajoutez cet événement au conteneur ayant toutes les étiquettes d'ancrage.

0
répondu Florian Margaine 2012-05-05 15:49:05

jAplus

vous pouvez le faire, sans écrire le code JavaScript

<head>
   <script src="/path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
   <script src="/path/to/jquery.Aplus.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
...
   <a href="delete.php?id=22" class="confirm" title="Are you sure?">Link</a>
...
</body>

page de Démonstration

0
répondu erik 2013-12-05 19:29:53

utilisant PHP, HTML et JAVASCRIPT pour la sollicitation

juste si quelqu'un cherche à utiliser php, html et javascript dans un seul fichier, la réponse ci-dessous fonctionne pour moi.. je l'ai attaché avec l'utilisation de bootstrap icône "corbeille" pour le lien.

<a class="btn btn-danger" href="<?php echo "delete.php?&var=$var"; ?>" onclick="return confirm('Are you sure want to delete this?');"><span class="glyphicon glyphicon-trash"></span></a>

la raison pour laquelle j'ai utilisé php code au milieu est parce que je ne peux pas l'utiliser dès le début..

le code ci-dessous ne fonctionne pas pour moi: -

echo "<a class='btn btn-danger' href='delete.php?&var=$var' onclick='return confirm('Are you sure want to delete this?');'><span class='glyphicon glyphicon-trash'></span></a>";

et je l'ai modifié comme dans le 1er code puis je cours comme ce dont j'ai besoin.. J'espère que je peux aider quelqu'un inneed de mon cas.

0
répondu Shah Abd Hafiz 2017-01-03 06:17:46