javascript確定取消

Javascript的確定取消功能指的是當使用者在網站上進行某些操作時，彈出一個對話框，提示使用者是否確定執行該操作或取消。這個功能在網站開發中應用廣泛，例如刪除操作、提交表單等。本文將詳細介紹如何使用Javascript實作確定取消功能。

一、什麼是確定取消功能

確定取消功能（Confirm）是一種提示框，在使用者進行某些操作時彈出，提示使用者是否確定執行該操作或取消。它一般有兩個按鈕，“確定”和“取消”，用戶可以根據需要點擊其中一個按鈕。確定按鈕會執行操作，取消按鈕則不執行操作，只是關閉提示框。

二、如何使用Javascript實作決定取消功能

Javascript中的confirm方法可以實作確定取消功能。此方法會彈出一個提示框，使用者可以點擊確定或取消按鈕。當使用者點擊確定按鈕時，該方法傳回true，當使用者點擊取消按鈕時，該方法傳回false。

下面是使用Javascript實作確定取消功能的範例程式碼：

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

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

在這個範例程式碼中，我們定義了一個名為deleteBlog的函數，在按鈕被點擊時呼叫函數。 deleteBlog函數彈出了一個提示框，詢問使用者是否確定刪除這篇部落格。如果使用者點選確定按鈕，函數就會執行刪除操作；如果使用者點擊取消按鈕，函數就不會執行刪除操作。

三、自訂提示框

Javascript的confirm方法彈出的提示框比較簡陋，無法滿足複雜的需求。我們可以透過自訂提示框來實現更美觀和靈活的提示框。

自訂提示框其實就是定義一個HTML元素，將它顯示在頁面上，並在頁面中使用CSS樣式控制其外觀和樣式。然後在Javascript中，使用事件觸發器控制提示框的顯示和隱藏。

例如下面是一個使用CSS自訂的提示方塊：

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

在這個範例程式碼中，我們定義了一個名為confirmDiv的DIV元素，將它隱藏在頁面中。當使用者點擊刪除部落格按鈕時，我們使用Javascript控制confirmDiv的顯示。同時，我們為確定按鈕和取消按鈕新增了對應的事件觸發器，使得使用者點擊按鈕時，能夠執行對應的操作。要注意的是，我們對按鈕的事件綁定是在deleteBlog函數中而不是在頁面載入時，這樣可以減少頁面載入時的事件綁定，提高頁面效能。

四、回呼函數

Javascript的確定取消功能一般是同步的，也就是使用者在提示框中點選確定或取消按鈕後，操作就會立即執行。但是有時候，使用者執行的操作需要一些時間，這時候我們就需要使用回呼函數。

回呼函數可以讓我們將執行時間很長的操作放到提示框關閉後執行，以免阻塞頁面的其他動作。例如下面是一個使用回呼函數實作確定取消功能的範例程式碼：

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("删除失败！");
    }
});

在這個範例程式碼中，我們定義了一個名為deleteBlog的函數，該函數接受一個回呼函數作為參數。當使用者點選確定按鈕時，deleteBlog函數會延遲1秒執行刪除操作，並在刪除操作執行完畢後呼叫回呼函數，將執行結果傳遞給回呼函數。當使用者點擊取消按鈕時，deleteBlog函數直接執行回呼函數，把執行結果傳遞給它。在這個範例中，我們使用alert方法顯示刪除結果，當然你也可以將刪除結果傳回給函數呼叫方，以便它根據刪除結果採取不同的動作。

五、總結

本文詳細介紹了Javascript確定取消功能的實作方法。首先我們介紹了確定取消功能的基本概念和原理，然後講解如何使用Javascript實作確定取消功能，並給出了使用CSS自訂提示框的實例。最後我們講解了回呼函數的概念及使用方法。確定取消功能在網站開發中應用廣泛，它不僅可以提高用戶體驗，還可以保護用戶的資料和網站的安全。

以上是javascript確定取消的詳細內容。更多資訊請關注PHP中文網其他相關文章！