>웹 프론트엔드 >JS 튜토리얼 >양식 제출 간섭 없이 브라우저 창 닫기 이벤트를 캡처하는 방법은 무엇입니까?

양식 제출 간섭 없이 브라우저 창 닫기 이벤트를 캡처하는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-12-29 11:15:11465검색

How to Capture Browser Window Close Events without Form Submission Interference?

양식 간섭 없이 브라우저 창 닫기 이벤트 캡처

브라우저 창(또는 탭)이 닫힐 때 특별히 트리거되는 이벤트를 원하는 것이 일반적입니다. . 그러나 일반적으로 이 목적으로 활용되는 beforeunload 이벤트는 양식 제출에도 반응합니다. 이 이벤트를 트리거하지 않도록 양식 관련 작업을 어떻게 제외할 수 있습니까?

답변:

이유에 관계없이 사용자가 현재 페이지에서 떠날 때마다 beforeunload 이벤트가 실행됩니다. . 여기에는 양식 제출, 링크 클릭 및 다른 페이지로의 직접 탐색이 포함됩니다. 이러한 작업을 제외하려면 다음 코드를 활용할 수 있습니다.

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; 
})

또는 1.7 이전 버전의 jQuery를 사용하는 경우 다음이 권장됩니다.

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

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

이 솔루션에서 사용자가 하이퍼링크를 클릭하거나 양식을 제출하면 FormOrLink의 플래그가 true로 설정됩니다. beforeunload 이벤트 중에 이 플래그를 확인하고 false인 경우 이벤트가 캡처되지 않습니다.

중요 참고:

다른 이벤트 핸들러가 양식 제출 또는 탐색이 발생하지 않도록 합니다. 이러한 경우 창을 닫아도 beforeunload 이벤트가 계속 발생하여 확인 메시지가 표시되지 않습니다. 이를 완화하려면 클릭 및 제출 이벤트에 시간을 기록하고 beforeunload가 상당히 나중에 발생하는지 확인하여 이러한 상황을 처리할 수 있도록 하세요.

위 내용은 양식 제출 간섭 없이 브라우저 창 닫기 이벤트를 캡처하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.