중복 이벤트 방지하기

오늘은 반응형에서 발생하는 에러인 중복되는 이벤트를 제거해보겠다!

오늘의 에러는 어쩌다 마주하게됐냐하믄..

 

열심히 반응형 작업 중, 퀵 메뉴에 대한 부분이 있었는데

모바일과 패드(세로) 기기에선 퀵 메뉴 중 하나를 눌렀을 때 모달창이 띄워지고

PC기준에서는 그냥 다른 링크로 보내버리는 로직을 짰다.

 

 <ul class="퀵메뉴임">
  <li class="메뉴 1임">
    <a href="보내버릴 링크임" target="_blank" id="modal">
      <div>메뉴 1인데 모바일에선 모달로 나타날거임</div>
    </a>
  </li>
  <li class="메뉴 2임">
    <a href="메뉴 2 링크임" target="_blank">
      <div>메뉴 2임</div>
    </a>
  </li>
</ul>

 

 

일단 저 첫 번째 메뉴를 누르면  새 페이지가 열리면서 원하는 링크로 이동한다.

하지만 modal이라는 아이디를 보면 알 수 있듯이, 사이트 정보 중 모바일 기기로 전환되면 레이아웃 처리가 곤란해지는 경우가 많다. 그렇기 때문에 퀵메뉴로 모달을 열 수 있도록 만드는 것임~~

그래서 모달창을 열고 닫는 제이쿼리를 추가해줌..

 

$("#modal").on("click", function (e) {
  e.preventDefault();
  $("#overlay").fadeIn(300);
  $(".quick_modal").fadeIn(300);
  lenis.stop();
});

 // 모달 닫기
$(".close_btn").on("click", function (e) {
  $("#overlay").fadeOut(300);
  $(".quick_modal").fadeOut(300);
  lenis.start();
});

 

이런식으로 on클릭 이벤트를 부여해 함수를 실행시켰다.

overlay는 모달 열었을 때 뒷배경 어둡게 해주기 위함이고,

lenis.stop()은 내가 모달을 열고있을 때 스크롤을 방지하기 위함이다.

 

이건 lenis 라이브러리를 쓸 때 사용하는 메서드이다.

 

 

이렇게 했으니 모달이 아주 잘 열리겠지?^^

 

 

아주 잘 열린당!

 

근데 문제는... 화면을 PC비율로 키웠을 때도 나타난다는 것..ㅋㅋㅋㅋㅋㅋㅋㅋ;;

 

해결방법은 window.resize 메서드를 써서 창 크기 변화에 따라 이벤트 핸들러를 다시 시작해주는 것이다.

 

// 처음에 작성했던 모달 열고닫는 함수
function modalOpen() {
  $("#modal").on("click", function (e) {
  e.preventDefault();
  $("#overlay").fadeIn(300);
  $(".quick_modal").fadeIn(300);
  lenis.stop();
});

 // 모달 닫기
$(".close_btn").on("click", function (e) {
  $("#overlay").fadeOut(300);
  $(".quick_modal").fadeOut(300);
  lenis.start();
});
}

// 초기 실행
modalOpen();

// 창 크기 변화에 따라 이벤트 핸들러 다시 확인
$(window).resize(function () {
  // 창 크기에 따라 이벤트를 다시 확인하여 중복 방지
  if ($(window).width() < 992) {
    // 이미 이벤트 핸들러가 바인딩되어 있으면 아무 작업도 하지 않음
    if (!$("#mapModal").data("events")) {
      modalOpen();
    }
  } else {
    // 창 크기가 992 이상인 경우 이벤트 핸들러 해제
    $("#mapModal").off("click");
    $(".close_btn").off("click");
  }
});

 

 

이런식으로 하면 창 크기를 변화할 때마다 이벤트를 다시 실행시키므로 

중복 이벤트를 방지할 수 있다!