브라우저 뒤로 버튼 누르기를 안정적으로 감지하고 페이지 내 뒤로 버튼 동작과 구별할 수 있는 방법은 무엇입니까?

크로스 브라우저 브라우저 뒤로 버튼 감지 구현

뒤로 버튼 누르기 이벤트 감지

사용자가 브라우저 뒤로 버튼을 눌렀는지 확인하는 것이 어렵습니다. . 많은 사람들이 window.onhashchange 기능 사용을 제안하지만 이는 페이지 내 뒤로 버튼에도 반응하여 사용자 경험에 부정적인 영향을 미칩니다.

페이지 내 뒤로 버튼 기능 관리

단일 페이지 애플리케이션의 경우 해시 탐색을 활용하면 페이지 내 뒤로 버튼의 동작을 제어하는 ​​것이 중요합니다. 이렇게 하려면 배열(window.location.lasthash)을 사용하여 사용자가 인터페이스를 탐색할 때 이전 해시를 저장합니다.

브라우저 뒤로 버튼과 페이지 내 뒤로 버튼 구별

다음과 같은 기존 방법 window.onbeforeunload 및 window.onmousedown은 브라우저 뒤로 버튼 클릭을 구별하는 데 효과적이지 않은 것으로 나타났습니다. 대신 문서의 onmouseover(마우스가 문서 위에 마우스를 올렸을 때)와 onmouseleave(마우스가 문서에서 나갈 때)에 의해 토글되는 플래그 변수가 고안되었습니다.

탐지 메커니즘 활용

window.onhashchange 수정 이 논리를 통합하려면:

window.onhashchange = function() {
    if (window.innerDocClick) {
        // In-page mechanism triggered the hash change
    } else {
        if (window.location.hash != '#undefined') {
            // Browser back button clicked
            goBack();
        }
    }
}

백스페이스 모방 방지 뒤로 버튼

백스페이스가 뒤로 버튼 이벤트를 트리거하지 않도록 하려면 다음 스크립트를 구현하십시오.

$(function(){
    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();
            }
        }
    });
});

요약하자면, 문서의 호버 이벤트를 활용하면 브라우저 뒤로 버튼을 효과적으로 구분할 수 있습니다. 클릭 및 페이지 내 뒤로 버튼 사용을 통해 뒤로 버튼 기능을 정밀하게 제어할 수 있습니다.

위 내용은 브라우저 뒤로 버튼 누르기를 안정적으로 감지하고 페이지 내 뒤로 버튼 동작과 구별할 수 있는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!