JavaScript에서 브라우저 창 닫기 이벤트만 안정적으로 감지하려면 어떻게 해야 합니까?

브라우저 창 닫기 이벤트: 종합 가이드

jQuery는 사용자가 브라우저에서 나가려고 하는 순간을 포착하기 위해 "beforeunload" 이벤트를 제공합니다. 웹페이지. 그러나 이 이벤트는 창 닫기뿐만 아니라 양식 제출과 같은 작업에 대해서도 트리거됩니다. 이 문제를 해결하기 위해 브라우저 창 닫기 이벤트를 구체적으로 캡처하는 방법을 자세히 살펴보겠습니다.

이름에서 알 수 있듯이 "beforeunload" 이벤트는 사용자가 현재 페이지에서 다른 곳으로 이동할 때마다 실행됩니다. 여기에는 양식 제출, 링크 클릭, 창이나 탭 닫기, 다양한 수단을 사용하여 새 페이지로 이동 등이 포함됩니다.

설명하기 위해 다음 jQuery 코드를 고려하세요.

jQuery(window).bind(
    "beforeunload",
    function() {
        return confirm("Do you really want to close?")
    }
)

이 동안 코드 조각이 창 닫기 이벤트를 캡처하려고 시도하면 실수로 양식 제출과 같은 다른 작업에 대한 확인 대화 상자가 트리거됩니다. 이러한 제한 사항을 해결하려면 창 닫기와 기타 탐색 이벤트를 구별해야 합니다.

한 가지 접근 방식은 다음 jQuery 코드를 활용하여 양식 제출 및 하이퍼링크(다른 프레임의 항목 제외)를 제외하는 것입니다.

var inFormOrLink;
$('a').on('click', function() { inFormOrLink = true; });
$('form').on('submit', function() { inFormOrLink = true; });

$(window).on("beforeunload", function() {
    return inFormOrLink ? "Do you really want to close?" : null;
})

이 코드에서는 관련 작업에서 inFormOrLink 변수를 true로 설정하여 사용자가 현재 양식이나 링크와 상호 작용하고 있는지 추적합니다. "beforeunload" 이벤트 중에는 사용자가 현재 양식이나 링크에 없는 경우에만 확인 메시지가 표시됩니다.

다른 이벤트 핸들러가 제출이나 탐색을 취소하면 이 접근 방식에 문제가 발생할 수 있습니다. 창을 닫아도 확인 메시지가 표시되지 않습니다. 이 문제를 완화하려면 제출 및 클릭 이벤트 시간을 기록하고 "beforeunload" 이벤트가 몇 초 이상 후에 발생하는지 확인하는 것이 좋습니다.

위 내용은 JavaScript에서 브라우저 창 닫기 이벤트만 안정적으로 감지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!