Ich möchte, dass dieser Link einen JavaScript-Dialog enthält, der den Benutzer fragt: " Sind Sie sicher? J/N ".
<a href="delete.php?id=22">Link</a>Wenn der Benutzer auf "Ja" klickt, sollte der Link geladen werden, wenn er auf "Nein" klickt, passiert nichts.
Ich weiß, wie man das in Formularen macht, indem man onclick Ausführen einer Funktion, die Folgendes zurückgibt true o false . Aber wie mache ich das mit einer <a> Link?
Sie können dies tun, ohne JavaScript-Code zu schreiben
<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>
Diese Methode unterscheidet sich geringfügig von den beiden obigen Antworten, wenn Sie Ihren Event-Handler mit addEventListener (oder attachEvent) anhängen.
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;
}
}Sie können diesen Handler entweder mit oder anhängen:
document.getElementById('mylinkid').addEventListener('click', myClickHandler, false);Oder für ältere Versionen des Internet Explorers:
document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);
Nur zum Spaß werde ich ein einzelnes Ereignis für das gesamte Dokument verwenden, anstatt ein Ereignis zu tous die Anker-Tags:
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?' );
}
};Diese Methode wäre effizienter, wenn Sie viele Anker-Tags hätten. Natürlich wird es noch effizienter, wenn Sie dieses Ereignis dem Container mit allen Anker-Tags hinzufügen.
Die meisten Browser zeigen die benutzerdefinierte Nachricht nicht an, die an confirm() .
Mit dieser Methode können Sie ein Popup mit einer benutzerdefinierten Nachricht anzeigen, wenn Ihr Benutzer den Wert einer <input> Feld.
Sie können dies anwenden nur zu einigen Links oder sogar andere HTML-Elemente auf Ihrer Seite. Fügen Sie einfach eine benutzerdefinierte Klasse zu allen Links hinzu, die bestätigt werden müssen, und verwenden Sie den folgenden Code:
$(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>Versuchen Sie, den Eingabewert im Beispiel zu ändern, um zu sehen, wie es funktioniert.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
