JavascriptBestätigenAbbrechen

Die Bestätigungs- und Abbruchfunktion von Javascript bedeutet, dass, wenn der Benutzer bestimmte Vorgänge auf der Website ausführt, ein Dialogfeld angezeigt wird, in dem der Benutzer gefragt wird, ob er den Vorgang bestätigen oder abbrechen soll. Diese Funktion wird häufig in der Website-Entwicklung verwendet, z. B. bei Löschvorgängen, beim Senden von Formularen usw. In diesem Artikel wird detailliert beschrieben, wie Sie mithilfe von Javascript die Funktion zur bestätigten Stornierung implementieren.

1. Was ist die Bestätigungs- und Abbruchfunktion?

Die Bestätigungs- und Abbruchfunktion (Bestätigen) ist ein Eingabeaufforderungsfeld, das angezeigt wird, wenn der Benutzer bestimmte Vorgänge ausführt, um den Benutzer dazu aufzufordern ob er den Vorgang sicher ausführen oder abbrechen wird. Es verfügt im Allgemeinen über zwei Schaltflächen: „OK“ und „Abbrechen“, und der Benutzer kann bei Bedarf auf eine der Schaltflächen klicken. Mit der Schaltfläche „OK“ wird der Vorgang ausgeführt, während mit der Schaltfläche „Abbrechen“ der Vorgang nicht ausgeführt wird und lediglich das Eingabeaufforderungsfeld geschlossen wird.

2. So verwenden Sie Javascript, um die bestätigte Stornierungsfunktion zu implementieren

Die Bestätigungsmethode in Javascript kann die bestätigte Stornierungsfunktion implementieren. Diese Methode öffnet ein Eingabeaufforderungsfeld und der Benutzer kann auf die Schaltfläche „OK“ oder „Abbrechen“ klicken. Diese Methode gibt true zurück, wenn der Benutzer auf die Schaltfläche „OK“ klickt, und false, wenn der Benutzer auf die Schaltfläche „Abbrechen“ klickt.

Das Folgende ist ein Beispielcode, der Javascript verwendet, um die bestätigte Stornierungsfunktion zu implementieren:

<script>
function deleteBlog() {
    // 弹出对话框
    var r = confirm("确定要删除这篇博客吗？");
    if (r == true) {
        // 用户点击了确定按钮
        // 执行删除操作
        alert("删除成功！");
    } else {
        // 用户点击了取消按钮
        // 不执行删除操作
    }
}
</script>

<button onclick="deleteBlog()">删除博客</button>

In diesem Beispielcode definieren wir eine Funktion namens deleteBlog, wenn auf die Schaltfläche geklickt wird Rufen Sie diese Funktion auf. Die Funktion „deleteBlog“ öffnet eine Eingabeaufforderung, in der der Benutzer gefragt wird, ob er diesen Blog wirklich löschen möchte. Wenn der Benutzer auf die Schaltfläche „OK“ klickt, führt die Funktion den Löschvorgang aus. Wenn der Benutzer auf die Schaltfläche „Abbrechen“ klickt, führt die Funktion den Löschvorgang nicht aus.

3. Benutzerdefiniertes Eingabeaufforderungsfeld

Das Eingabeaufforderungsfeld, das in der Bestätigungsmethode von Javascript angezeigt wird, ist relativ einfach und kann komplexe Anforderungen nicht erfüllen. Wir können eine schönere und flexiblere Eingabeaufforderungsbox erreichen, indem wir die Eingabeaufforderungsbox anpassen.

Das Anpassen des Eingabeaufforderungsfelds besteht eigentlich darin, ein HTML-Element zu definieren, es auf der Seite anzuzeigen und CSS-Stile zu verwenden, um sein Erscheinungsbild und seinen Stil auf der Seite zu steuern. Verwenden Sie dann in Javascript Ereignisauslöser, um das Ein- und Ausblenden des Eingabeaufforderungsfelds zu steuern.

Das Folgende ist beispielsweise ein mit CSS angepasstes Eingabeaufforderungsfeld:

<div class="confirm" id="confirmDiv">
    <div class="confirm-title">是否确定删除？</div>
    <div class="confirm-btns">
        <button class="confirm-btn" id="okBtn">确定</button>
        <button class="confirm-btn" id="cancelBtn">取消</button>
    </div>
</div>

<script>
var confirmDiv = document.getElementById("confirmDiv");
var okBtn = document.getElementById("okBtn");
var cancelBtn = document.getElementById("cancelBtn");

function deleteBlog() {
    // 显示提示框
    confirmDiv.style.display = "block";
    
    // 取消按钮点击事件
    cancelBtn.onclick = function() {
        confirmDiv.style.display = "none";
    }
    
    // 确定按钮点击事件
    okBtn.onclick = function() {
        confirmDiv.style.display = "none";
        // 执行删除操作
        alert("删除成功！");
    }
}
</script>

<button onclick="deleteBlog()">删除博客</button>

In diesem Beispielcode definieren wir ein DIV-Element mit dem Namen „confirmDiv“ und verstecken es in der Seitenmitte. Wenn der Benutzer auf die Schaltfläche „Blog löschen“ klickt, verwenden wir Javascript, um die Anzeige von bestätigenDiv zu steuern. Gleichzeitig haben wir den Schaltflächen OK und Abbrechen entsprechende Ereignisauslöser hinzugefügt, sodass der entsprechende Vorgang ausgeführt werden kann, wenn der Benutzer auf die Schaltfläche klickt. Es ist zu beachten, dass unsere Ereignisbindung für die Schaltfläche in der deleteBlog-Funktion und nicht beim Laden der Seite erfolgt. Dies kann die Ereignisbindung beim Laden der Seite reduzieren und die Seitenleistung verbessern.

4. Rückruffunktion

Die Bestätigungs- und Abbruchfunktion von Javascript ist im Allgemeinen synchron, dh nachdem der Benutzer im Eingabeaufforderungsfeld auf die Schaltfläche „Bestätigen“ oder „Abbrechen“ geklickt hat, wird der Vorgang ausgeführt sofort ausgeführt. Aber manchmal dauert der vom Benutzer ausgeführte Vorgang einige Zeit, dann müssen wir die Rückruffunktion verwenden.

Mit der Rückruffunktion können wir lang laufende Vorgänge ausführen, nachdem das Eingabeaufforderungsfeld geschlossen wurde, um andere Vorgänge auf der Seite nicht zu blockieren. Im Folgenden sehen Sie beispielsweise einen Beispielcode, der eine Rückruffunktion verwendet, um die bestätigte Stornierungsfunktion zu implementieren:

function deleteBlog(callback) {
    var r = confirm("确定要删除这篇博客吗？");
    if (r == true) {
        setTimeout(function() {
            // 执行删除操作
            callback(true);
        }, 1000); // 延迟1秒执行删除操作
    } else {
        callback(false);
    }
}

deleteBlog(function(result) {
    if (result) {
        alert("删除成功！");
    } else {
        alert("删除失败！");
    }
});

In diesem Beispielcode definieren wir eine Funktion namens deleteBlog, die eine Rückruffunktion als Parameter akzeptiert . Wenn der Benutzer auf die Schaltfläche OK klickt, verzögert die Funktion deleteBlog den Löschvorgang um 1 Sekunde, ruft nach Abschluss des Löschvorgangs die Rückruffunktion auf und übergibt das Ausführungsergebnis an die Rückruffunktion. Wenn der Benutzer auf die Schaltfläche „Abbrechen“ klickt, führt die Funktion deleteBlog die Rückruffunktion direkt aus und übergibt ihr das Ausführungsergebnis. In diesem Beispiel verwenden wir die Alert-Methode, um das Löschergebnis anzuzeigen. Natürlich können Sie das Löschergebnis auch an den Funktionsaufrufer zurückgeben, damit dieser basierend auf dem Löschergebnis unterschiedliche Aktionen ausführen kann.

5. Zusammenfassung

In diesem Artikel wird die Implementierungsmethode der Bestätigungsstornierungsfunktion von Javascript ausführlich vorgestellt. Zuerst stellten wir die grundlegenden Konzepte und Prinzipien der bestätigten Abbruchfunktion vor, erklärten dann, wie Javascript zum Implementieren der bestätigten Abbruchfunktion verwendet wird, und gaben ein Beispiel für die Verwendung von CSS zum Anpassen des Eingabeaufforderungsfelds. Abschließend haben wir das Konzept und die Verwendung von Rückruffunktionen erläutert. Die Funktion zum Bestätigen und Abbrechen wird häufig in der Website-Entwicklung verwendet. Sie kann nicht nur die Benutzererfahrung verbessern, sondern auch Benutzerdaten und Website-Sicherheit schützen.

Das obige ist der detaillierte Inhalt vonJavascriptBestätigenAbbrechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!