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


268

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?


Jak możemy osiągnąć ten angularjs1.x
Bhaskara Arani

Odpowiedzi:


596

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>

Czy to naprawdę było takie proste! Jestem zawstydzony czy co! Po prostu założyłem, że działa tylko na formularzach. Czy okno dialogowe potwierdzenia działa dla każdego klikalnego elementu?
Christoffer

1
@Tophe Samo okno dialogowe potwierdzenia nie ma nic wspólnego z określonymi elementami.
kapa

1
W przypadku czegoś tak prostego, czy naprawdę konieczne jest oddzielenie HTML i JavaScript? Jakie problemy przewidziałbyś pozostawiając tak prostą i krótką funkcję w linii?
Ciaran Gallagher

5
@CiaranG Zawsze zaczyna się tak :), wtedy dodajesz to i tamto, itd. Jeśli uda Ci się rozdzielić obawy, poczujesz się czystszy, jeśli pozbędziesz się większości tych wbudowanych programów obsługi. Po prostu nie mają nic wspólnego z twoim HTML. Przynajmniej moim zdaniem, a przynajmniej w większości przypadków. Zawsze są szczególne okoliczności - lenistwo nie powinno być jedną z nich.
kapa

@Ulysnep Zgodnie z sugestią edycji wystąpił błąd podczas pomijania średnika po confirm(…)w module obsługi w wierszu . Nie mogłem tego odtworzyć.
user4642212,

15

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:


Dziękuję Ci. Krótkie rozwiązanie potwierdzające działało. Dlaczego sugerujesz unikanie kodu wbudowanego? Zwykle trzymam się z dala od wbudowanego CSS z oczywistych powodów, ale jakie są przyczyny krótkich fragmentów kodu javascript?
Christoffer

Z tego samego powodu, dla którego wbudowany CSS jest niewskazany, trudniej jest go utrzymać, co prowadzi do bałaganu HTML i wymaga nadmiernej ilości pracy, aby zaktualizować, jeśli zmienią się wymagania.
David mówi, że przywraca Monikę

Zgadzam się z tym, że nie używam programów do obsługi inline. Jeśli jednak dołączymy nasze procedury obsługi do skryptu, należy użyć modelu zaawansowanego ( addEventListener). +1.
kapa

@ bažmegakapa: Ja ... zgadzam się; ale muszę wyznać, że jeszcze nie poczułam się komfortowo z tym addEventListener()modelem.
David mówi, że przywraca Monikę

Można wymienić if(check == true)z if(check).
Anonimowy

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

5

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>

Odpowiedź udzielona przez @kapa jest bardzo łatwa i mniej niechlujna
dipenparmar12

1

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


11
Dziękujemy za udostępnienie, ale oczywiście używasz Javascript, dodajesz całą bibliotekę, aby obsłużyć coś bardzo prostego. Czy warto? Nie znam tej biblioteki, przeczytam o niej, jeśli użyjesz jej również do innych celów, może warto ją dodatkowo załadować ...
Marcos Buarque

1
Dwie biblioteki dla tej prostej rzeczy?
maracuja-juice

0

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

Jeśli dbasz o stare IE, nie zapomnij window.event.
kapa

0

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.


0

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.


-2

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.