Come visualizzare una finestra di conferma quando si fa clic su un collegamento <a>?


269

Voglio che questo link abbia una finestra di dialogo JavaScript che chiede all'utente “ Sei sicuro? S / N ".

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

Se l'utente fa clic su "Sì", il collegamento dovrebbe essere caricato, se "No" non accadrà nulla.

So come farlo nei moduli, utilizzando l' onclickesecuzione di una funzione che restituisce trueo false. Ma come posso fare questo con un <a>link?


Come possiamo ottenere questo angularjs1.x
Bhaskara Arani

Risposte:


597

Gestore di eventi in linea

Nel modo più semplice, è possibile utilizzare la confirm()funzione in un onclickgestore in linea .

<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>

Gestione avanzata degli eventi

Ma normalmente vorresti separare HTML e Javascript , quindi ti suggerisco di non usare i gestori di eventi inline, ma di inserire una classe sul tuo link e aggiungere un listener di eventi.

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

In questo esempio sarà solo il lavoro nei browser moderni (per IE meno recenti è possibile utilizzare attachEvent(), returnValuee fornire un'implementazione per getElementsByClassName()o utilizzare una libreria come jQuery che vi aiuterà con problemi di cross-browser). Puoi leggere ulteriori informazioni su questo metodo avanzato di gestione degli eventi su MDN .

jQuery

Mi piacerebbe stare lontano dall'essere considerato un fan di jQuery, ma la manipolazione del DOM e la gestione degli eventi sono due aree in cui aiuta di più con le differenze del browser. Solo per divertimento, ecco come apparirebbe con 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>

È stato davvero così facile! Sono imbarazzato o cosa! Ho solo pensato che funzionasse solo sulle forme. La finestra di dialogo di conferma funziona per ogni elemento selezionabile?
Christoffer,

1
@Tophe La finestra di dialogo di conferma non ha nulla a che fare con elementi specifici.
kapa,

1
Per qualcosa di così semplice, è davvero necessario separare HTML e JavaScript? Quali problemi prevederesti lasciando in linea una funzione così semplice e breve?
Ciaran Gallagher,

5
@CiaranG Inizia sempre così :), poi aggiungi questo e quello, ecc. Se riesci ad abbracciare la separazione delle preoccupazioni, ti sentirai più pulito se ti sbarazzerai della maggior parte di questi gestori in linea. Non hanno niente da fare nel tuo HTML. Almeno secondo me, e almeno nella maggior parte dei casi. Ci sono sempre circostanze speciali: la pigrizia non dovrebbe essere una di queste.
Kapa,

@Ulysnep Secondo il tuo suggerimento di modifica, c'era un bug nell'omettere il punto e virgola dopo confirm(…)nel gestore in linea. Non sono riuscito a riprodurlo.
user4642212

15

Suggerirei di evitare JavaScript in linea:

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

Demo di JS Fiddle .

Quanto sopra aggiornato per ridurre lo spazio, pur mantenendo chiarezza / funzione:

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

Demo di JS Fiddle .

Un aggiornamento un po 'tardivo, da usare addEventListener()(come suggerito da Bažmegakapa , nei commenti qui sotto):

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

Demo di JS Fiddle .

Quanto sopra associa una funzione all'evento di ogni singolo collegamento; che è potenzialmente piuttosto dispendioso, quando è possibile associare la gestione degli eventi (utilizzando la delega) a un elemento antenato, come il seguente:

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

Demo di JS Fiddle .

Poiché la gestione degli eventi è collegata bodyall'elemento, che normalmente contiene una miriade di altri elementi cliccabili, ho usato una funzione temporanea ( actionToFunction) per determinare cosa fare con quel clic. Se l'elemento su cui si fa clic è un collegamento e pertanto presenta un tagNameof a, la gestione dei clic viene passata alla reallySure()funzione.

Riferimenti:


Grazie. La soluzione di conferma in linea corta ha funzionato. Perché suggerisci di evitare il codice inline? Di solito mi tengo lontano dai CSS in linea per ovvi motivi, ma quali sono i motivi in ​​brevi frammenti javascript?
Christoffer,

Per lo stesso motivo per cui i CSS in linea sono sconsigliati, è più difficile da mantenere e portano a un codice HTML più disordinato e richiedono una quantità eccessiva di lavoro per l'aggiornamento se i requisiti cambiano.
David dice di ripristinare Monica

Sono d'accordo con il punto di non utilizzare i gestori in linea. Ma se in ogni caso alleghiamo i nostri gestori nello script, dovrebbe essere usato il modello avanzato ( addEventListener). +1 però.
kapa,

@ bažmegakapa: io ... tendo ad essere d'accordo; ma devo confessare che devo ancora sentirmi a mio agio con il addEventListener()modello.
David dice di ripristinare Monica

È possibile sostituire if(check == true)con if(check).
Anonimo

14
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>

5

Puoi anche provare questo:

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
    Link Text
</a>

Ans data da @kapa è molto semplice e meno disordinato
dipenparmar12,

1

jAplus

Puoi farlo, senza scrivere codice 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>

Pagina dimostrativa


11
Grazie per la condivisione, ma ovviamente stai utilizzando Javascript, stai aggiungendo un'intera libreria per gestire qualcosa di molto semplice. Ne vale la pena? Non conosco quella biblioteca, la leggerò, se la usi anche per altri scopi, forse vale la pena caricarla di più ...
Marcos Buarque,

1
Due librerie per questa cosa semplice?
succo di maracuja,

0

Questo metodo è leggermente diverso da una delle risposte precedenti se si collega il gestore eventi utilizzando addEventListener (o 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;
  }
}

Puoi allegare questo gestore con:

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

O per le versioni precedenti di Internet Explorer:

document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);

Se ti preoccupi dei vecchi IE, non dimenticare window.event.
kapa,

0

Per divertimento, userò un singolo evento sull'intero documento invece di aggiungere un evento a tutti i tag di ancoraggio:

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

Questo metodo sarebbe più efficiente se avessi molti tag di ancoraggio. Naturalmente, diventa ancora più efficiente quando aggiungi questo evento al contenitore con tutti i tag di ancoraggio.


0

La maggior parte dei browser non visualizza il messaggio personalizzato passato confirm().

Con questo metodo, è possibile mostrare un popup con un messaggio personalizzato se l'utente ha modificato il valore di qualsiasi <input>campo.

Puoi applicarlo solo ad alcuni link o anche ad altri elementi HTML nella tua pagina. Basta aggiungere una classe personalizzata a tutti i collegamenti che necessitano di conferma e applicare utilizzare il seguente codice:

$(document).ready(function() {
  let unsaved = false;
  // detect changes in all input fields and set the 'unsaved' flag
  $(":input").change(() => unsaved = true);
  // trigger popup on click
  $('.dangerous-link').click(function() {
    if (unsaved && !window.confirm("Are you sure you want to nuke the world?")) {
      return; // user didn't confirm
    }
    // either there are no unsaved changes or the user confirmed
    window.location.href = $(this).data('destination');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" placeholder="Nuclear code here" />
<a data-destination="https://en.wikipedia.org/wiki/Boom" class="dangerous-link">
    Launch nuke!
</a>

Prova a modificare il valore di input nell'esempio per ottenere un'anteprima di come funziona.


-2

UTILIZZANDO PHP, HTML E JAVASCRIPT per i prompt

Solo se qualcuno sta cercando di usare php, html e javascript in un singolo file, la risposta qui sotto funziona per me .. Ho allegato con l'icona di bootstrap "trash" per il collegamento.

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

il motivo per cui ho usato il codice php nel mezzo è perché non posso usarlo dall'inizio ..

il codice qui sotto non funziona per me: -

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>";

e l'ho modificato come nel 1 ° codice, quindi eseguo esattamente ciò di cui ho bisogno. Spero di poter aiutare qualcuno che ha bisogno del mio caso.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.