Inflearn Community Q&A
asked
줌인 상태일 때
Written on
·
251
0
줌인 상태일 때, current-menu 클래스가 추가된
menu-item 외에 다른 menu-item을 누르면 leaflet 의 위치가 바뀌면서 틀이 틀어지는 이슈가 생겼습니다.
current-menu 클래스가 메뉴 중 1개라도 추가가 되어 있다면 zoomin 함수가 실행되지 않게 하고 싶은데..
제가 코드를 아는 지식선에서 해봤지만 오류만 나네요ㅠㅠ
css로
.zoom-in { pointer-event: none }
.current-menu .back-btn { pointer-event: auto }
로 설정을 했더니
current-menu 가 추가가되면 다른
menu-item은 클릭하지 못하게 설정은 되었습니다.
css로 적용이 아닌
스크립트로 적용하고싶은데..
이럴 땐 어떻게 코드를 개선해줘야할지..답변 부탁드립니다!!
javascriptHTML/CSS인터랙티브-웹
Answer 1
1
studiomeal
Instructor
아 답변이 많이 늦었네요 죄송! ^^;
완성소스코드가 나중에 업데이트가 된 적이 있는데요,
완성소스 main.js의 99번 라인을 보시면("추가 코드"라고 검색해보시면 됩니다) body에 zoom-in 클래스가 있으면 동작하지 않도록 처리하고 있답니다.
이런 식으로 CSS와 JS를 결합해서 생각하시면 좀 더 간단한 방법으로 처리할 수 있는 것들이 많이 있습니다^^
click 이벤트핸들러의 아래 부분입니다.
if (menuItemElem) {
// 추가 코드: 줌인된 상태에서는 동작하지 않도록 zoom-in 클래스를 체크
if (!document.body.classList.contains('zoom-in')) {
zoomIn(menuItemElem);
}
}