Jak wyświetlić okno dialogowe potwierdzenia po kliknięciu łącza <a>?

Chcę, aby ten link zawierał okno dialogowe JavaScript z pytaniem użytkownika „ Jesteś pewien? T / N ”.

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

Jeśli użytkownik kliknie „Tak”, link powinien się załadować, jeśli „Nie” nic się nie stanie.

Wiem, jak to zrobić w formularzach, używając onclickfunkcji zwracającej truelub false. Ale jak to zrobić za pomocą <a>linku?

Inline moduł obsługi zdarzeń

W najprostszy sposób możesz użyć tej confirm()funkcji w module onclickobsługi inline .

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

Zaawansowana obsługa zdarzeń

Ale zwykle chciałbyś oddzielić HTML i JavaScript , więc sugeruję, abyś nie korzystał z wbudowanych programów obsługi zdarzeń, ale umieścił klasę w linku i dodał do niego detektor zdarzeń.

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

Ten przykład działa tylko w nowoczesnych przeglądarkach (dla starszych IES można użyć attachEvent(), returnValuei stanowią implementację getElementsByClassName()lub korzystać z biblioteki jak jQuery, które pomogą z problemów w różnych przeglądarkach). Możesz przeczytać więcej o tej zaawansowanej metodzie obsługi zdarzeń w MDN .

jQuery

Chciałbym trzymać się z daleka od bycia uważanym za fanboya jQuery, ale manipulacja DOM i obsługa zdarzeń to dwa obszary, w których najbardziej pomaga w różnicach w przeglądarce. Dla zabawy, oto jak wyglądałoby to z 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>

Sugeruję unikanie wbudowanego JavaScript:

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 JS Fiddle .

Powyżej zaktualizowano, aby zmniejszyć przestrzeń, ale zachowując przejrzystość / funkcję:

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 JS Fiddle .

Trochę spóźniona aktualizacja, do użycia addEventListener()(jak sugeruje bažmegakapa , w komentarzach poniżej):

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 JS Fiddle .

Powyższe wiąże funkcję ze zdarzeniem każdego pojedynczego łącza; co jest potencjalnie dość marnotrawstwem, gdy można powiązać obsługę zdarzeń (przy użyciu delegowania) z elementem nadrzędnym, takim jak:

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 JS Fiddle .

Ponieważ obsługa zdarzeń jest dołączona do bodyelementu, który zwykle zawiera wiele innych, klikalnych elementów, użyłem funkcji tymczasowej ( actionToFunction) w celu ustalenia, co zrobić z tym kliknięciem. Jeśli element klikany jest link, a zatem ma tagNamez a, click-manipulacja jest przekazywany do reallySure()funkcji.

Bibliografia:

• addEventListener().
• Operator warunkowy („trójskładnikowy”) .
• confirm().
• getElementsByTagName().
• onclick.
• if () {}.

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

Możesz także spróbować tego:

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

jAplus

Możesz to zrobić bez pisania kodu 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>

Strona demonstracyjna

Ta metoda różni się nieco od jednej z powyższych odpowiedzi, jeśli dołączasz moduł obsługi zdarzeń za pomocą addEventListener (lub 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;
  }
}

Możesz dołączyć ten moduł obsługi za pomocą:

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

Lub dla starszych wersji Internet Explorera:

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

Dla zabawy zamierzam użyć pojedynczego zdarzenia w całym dokumencie zamiast dodawać zdarzenie do wszystkich tagów zakotwiczenia:

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

Ta metoda byłaby bardziej wydajna, gdybyś miał wiele tagów zakotwiczenia. Oczywiście staje się jeszcze bardziej wydajne, gdy dodasz to zdarzenie do kontenera zawierającego wszystkie tagi kotwicy.

Większość przeglądarek nie wyświetla niestandardowego komunikatu przekazanego do confirm().

Dzięki tej metodzie możesz wyświetlić wyskakujące okienko z niestandardowym komunikatem, jeśli użytkownik zmienił wartość dowolnego <input>pola.

Możesz zastosować to tylko do niektórych linków , a nawet innych elementów HTML na swojej stronie. Po prostu dodaj niestandardową klasę do wszystkich linków, które wymagają potwierdzenia i zastosuj, użyj następującego kodu:

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

Spróbuj zmienić wartość wejściową w przykładzie, aby uzyskać podgląd tego, jak to działa.

UŻYWANIE PHP, HTML I JAVASCRIPT do monitowania

Tylko jeśli ktoś szuka użycia php, html i javascript w jednym pliku, poniższa odpowiedź działa dla mnie. Dołączyłem z linkiem ikonę „kosz” bootstrap.

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

powodem, dla którego użyłem kodu php w środku jest to, że nie mogę go używać od samego początku ..

poniższy kod nie działa dla mnie: -

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

i zmodyfikowałem go jak w pierwszym kodzie, a następnie uruchamiam tak, jak potrzebuję. Mam nadzieję, że mogę pomóc komuś innemu w mojej sprawie.