>웹 프론트엔드 >JS 튜토리얼 >양식 제출이나 하이퍼링크를 트리거하지 않고 브라우저 창 닫기 이벤트를 어떻게 캡처할 수 있습니까?

양식 제출이나 하이퍼링크를 트리거하지 않고 브라우저 창 닫기 이벤트를 어떻게 캡처할 수 있습니까?

Susan Sarandon
Susan Sarandon원래의
2024-12-07 12:56:14607검색

How Can I Capture Browser Window Close Events Without Triggering on Form Submissions or Hyperlinks?

양식 제출 및 하이퍼링크를 제외하는 동안 브라우저 창 닫기 이벤트 캡처

jQuery의 beforeunload 이벤트는 사용자가 페이지를 떠날 때를 감지하도록 설계되었습니다. . 그러나 이 이벤트는 양식 제출 시에도 트리거되며 이는 특정 시나리오에서는 바람직하지 않을 수 있습니다. 이 문서에서는 beforeunload 이벤트에서 양식 제출 및 하이퍼링크(다른 프레임 제외)를 제외하는 접근 방식을 살펴봅니다.

이를 달성하려면 먼저 inFormOrLink 변수를 false로 초기화합니다. 사용자가 하이퍼링크를 클릭하거나 양식을 제출하면 inFormOrLink를 true로 설정합니다.

beforeunload 이벤트 핸들러 내에서 inFormOrLink 값을 확인합니다. 사실인 경우 "정말로 닫으시겠습니까?"라는 메시지와 함께 사용자에게 확인 메시지를 표시합니다. 반대로 inFormOrLink가 false인 경우 null을 반환하여 확인 메시지를 표시하지 않습니다.

다음은 jQuery 버전 1.7 이상에 대해 수정된 코드 조각입니다.

var inFormOrLink = false;
$('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; 
});

jQuery 버전 1.7 이하의 경우 다음을 사용하세요. 다음 코드:

var inFormOrLink = false;
$('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; 
});

이 접근 방식은 브라우저 창 닫기 이벤트를 효과적으로 캡처하는 동시에 제외됩니다. 양식 제출 및 하이퍼링크(다른 프레임 제외)

위 내용은 양식 제출이나 하이퍼링크를 트리거하지 않고 브라우저 창 닫기 이벤트를 어떻게 캡처할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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