javascriptconfirm cancel

Fungsi pengesahan dan pembatalan JavaScript bermakna apabila pengguna melakukan operasi tertentu di tapak web, kotak dialog muncul untuk menggesa pengguna sama ada dia pasti melakukan operasi atau membatalkan. Fungsi ini digunakan secara meluas dalam pembangunan laman web, seperti operasi pemadaman, penyerahan borang, dsb. Artikel ini akan memperkenalkan secara terperinci cara menggunakan Javascript untuk melaksanakan fungsi pembatalan yang disahkan.

1. Apakah fungsi Sahkan Batal

Fungsi Sahkan Batal (Sahkan) ialah kotak gesaan yang muncul apabila pengguna melakukan operasi tertentu, menggesa pengguna sama ada dia pasti melakukan operasi atau membatalkannya. Ia biasanya mempunyai dua butang, "OK" dan "Batal", dan pengguna boleh mengklik salah satu butang seperti yang diperlukan. Butang OK akan melakukan operasi, manakala butang Batal tidak akan melakukan operasi dan hanya menutup kotak gesaan.

2. Cara menggunakan Javascript untuk melaksanakan fungsi mengesahkan dan membatalkan

Kaedah pengesahan dalam Javascript boleh melaksanakan fungsi mengesahkan dan membatalkan. Kaedah ini memaparkan kotak gesaan dan pengguna boleh mengklik butang OK atau Batal. Kaedah ini kembali benar apabila pengguna mengklik butang OK dan palsu apabila pengguna mengklik butang Batal.

Berikut ialah contoh kod yang menggunakan Javascript untuk melaksanakan fungsi pembatalan yang disahkan:

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

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

Dalam kod sampel ini, kami mentakrifkan fungsi bernama deleteBlog, yang dipanggil apabila butang diklik. Fungsi deleteBlog muncul kotak gesaan yang bertanya kepada pengguna jika dia pasti akan memadamkan blog ini. Jika pengguna mengklik butang OK, fungsi akan melakukan operasi padam jika pengguna mengklik butang Batal, fungsi tidak akan melakukan operasi padam.

3. Kotak gesaan tersuai

Kotak gesaan yang muncul oleh kaedah pengesahan Javascript agak mudah dan tidak dapat memenuhi keperluan yang rumit. Kita boleh mencapai kotak gesaan yang lebih cantik dan fleksibel dengan menyesuaikan kotak gesaan.

Memperibadikan kotak gesaan sebenarnya adalah untuk mentakrifkan elemen HTML, memaparkannya pada halaman dan menggunakan gaya CSS untuk mengawal penampilan dan gayanya pada halaman. Kemudian dalam Javascript, gunakan pencetus peristiwa untuk mengawal paparan dan menyembunyikan kotak gesaan.

Sebagai contoh, berikut ialah kotak gesaan yang disesuaikan menggunakan 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>

Dalam kod sampel ini, kami mentakrifkan elemen DIV bernama confirmDiv untuk menyembunyikannya dalam halaman. Apabila pengguna mengklik butang padam blog, kami menggunakan Javascript untuk mengawal paparan confirmDiv. Pada masa yang sama, kami menambah pencetus peristiwa yang sepadan pada butang OK dan butang Batal, supaya apabila pengguna mengklik butang, operasi yang sepadan boleh dilakukan. Perlu diingat bahawa pengikatan acara kami untuk butang berada dalam fungsi deleteBlog dan bukannya semasa halaman dimuatkan Ini boleh mengurangkan pengikatan acara apabila halaman dimuatkan dan meningkatkan prestasi halaman.

4. Fungsi panggil balik

Fungsi mengesahkan dan membatalkan Javascript secara amnya adalah segerak, iaitu selepas pengguna mengklik butang sahkan atau batal dalam kotak gesaan, operasi akan dilaksanakan serta-merta . Tetapi kadangkala, operasi yang dilakukan oleh pengguna mengambil sedikit masa, maka kita perlu menggunakan fungsi panggil balik.

Fungsi panggil balik membolehkan kami melaksanakan operasi yang berjalan lama selepas kotak gesaan ditutup, supaya tidak menyekat operasi lain pada halaman. Sebagai contoh, berikut ialah contoh kod yang menggunakan fungsi panggil balik untuk melaksanakan fungsi pembatalan yang disahkan:

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

Dalam kod sampel ini, kami mentakrifkan fungsi bernama deleteBlog, yang menerima fungsi panggil balik sebagai parameter. Apabila pengguna mengklik butang OK, fungsi deleteBlog akan menangguhkan operasi pemadaman selama 1 saat, memanggil fungsi panggil balik selepas operasi pemadaman selesai, dan menghantar hasil pelaksanaan kepada fungsi panggil balik. Apabila pengguna mengklik butang batal, fungsi deleteBlog secara langsung melaksanakan fungsi panggil balik dan menyerahkan hasil pelaksanaan kepadanya. Dalam contoh ini, kami menggunakan kaedah makluman untuk memaparkan hasil pemadaman Sudah tentu, anda juga boleh mengembalikan hasil pemadaman kepada pemanggil fungsi supaya ia boleh mengambil tindakan yang berbeza berdasarkan hasil pemadaman.

5. Ringkasan

Artikel ini memperkenalkan secara terperinci kaedah pelaksanaan fungsi pembatalan yang disahkan oleh Javascript. Mula-mula, kami memperkenalkan konsep dan prinsip asas fungsi pembatalan yang disahkan, kemudian menerangkan cara menggunakan Javascript untuk melaksanakan fungsi pembatalan yang disahkan, dan memberikan contoh menggunakan CSS untuk menyesuaikan kotak gesaan. Akhir sekali, kami menerangkan konsep dan penggunaan fungsi panggil balik. Fungsi pengesahan-batal digunakan secara meluas dalam pembangunan laman web Ia bukan sahaja dapat meningkatkan pengalaman pengguna, tetapi juga melindungi data pengguna dan keselamatan laman web.

Atas ialah kandungan terperinci javascriptconfirm cancel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!