오늘은 반응형에서 발생하는 에러인 중복되는 이벤트를 제거해보겠다!
오늘의 에러는 어쩌다 마주하게됐냐하믄..
열심히 반응형 작업 중, 퀵 메뉴에 대한 부분이 있었는데
모바일과 패드(세로) 기기에선 퀵 메뉴 중 하나를 눌렀을 때 모달창이 띄워지고
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");
}
});
이런식으로 하면 창 크기를 변화할 때마다 이벤트를 다시 실행시키므로
중복 이벤트를 방지할 수 있다!
728x90
반응형