Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Mengesan Klik Butang Belakang Penyemak Imbas dengan Amanah dan Menguatkuasakan Navigasi Dalam Halaman?

Bagaimanakah Saya Boleh Mengesan Klik Butang Belakang Penyemak Imbas dengan Amanah dan Menguatkuasakan Navigasi Dalam Halaman?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-13 10:15:11500semak imbas

How Can I Reliably Detect Browser Back Button Clicks and Enforce In-Page Navigation?

Teknik Penyemak Imbas Silang untuk Mengesan Klik Butang Belakang Penyemak Imbas dan Menguatkuasakan Navigasi Dalam Halaman

Mengesan klik butang belakang penyemak imbas dan menguatkuasakan penggunaan daripada sistem navigasi dalam halaman menggunakan sistem hashtag (#) boleh mencabar.

Pengesanan Butang Belakang Penyemak Imbas

Pendekatan konvensional menggunakan window.onhashchange sahaja tidak boleh dipercayai, kerana ia juga mencetuskan apabila elemen dalam halaman menukar cincang. Untuk menangani perkara ini, teknik baru menggunakan document.onmouseover, document.onmouseleave dan bendera boolean (window.innerDocClick) digunakan. Apabila tetikus pengguna memasuki kawasan dokumen, window.innerDocClick ditetapkan kepada benar dan apabila ia keluar, ia ditetapkan kepada palsu. Ini membenarkan pengendali tetingkap.onhashchange berikut:

window.onhashchange = function() {
    if (window.innerDocClick) {
        window.innerDocClick = false;
    } else {
        if (window.location.hash != '#undefined') {
            goBack();
        } else {
            history.pushState("", document.title, window.location.pathname);
            location.reload();
        }
    }
}

Penguatkuasaan Butang Belakang Dalam Halaman

Untuk mengawal navigasi belakang semata-mata melalui butang belakang dalam halaman, tatasusunan sejarah (window.location.lasthash) digunakan untuk menyimpan cincangan sebelumnya semasa pengguna maju melalui antara muka. Fungsi butang belakang dalam halaman (goBack) menggunakan tatasusunan ini untuk menavigasi ke halaman sebelumnya.

function goBack() {
    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
    window.location.lasthash.pop();
}

Menekan Kunci Ruang Belakang

Untuk menghalang pengguna daripada menggunakan kekunci ruang belakang untuk mencetuskan butang belakang, coretan kod berikut boleh ditambah:

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Klik Butang Belakang Penyemak Imbas dengan Amanah dan Menguatkuasakan Navigasi Dalam Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn