On/off 버튼에 따른 이벤트 삭제 유무

카카오맵 API (지도/로컬)
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

출발점과 도착점에 대한 마커 클릭을 만들려고 하는데

출발점 버튼과 도착점 버튼으로 각각에 이벤트를 추가시키고 삭제 시킬려고 했습니다

removeListener을 이용 해서 할려는데 Handler문제 인지 적용이 되지 않아 질문드립니다

function change_btn(event) {
    var btns = document.querySelectorAll(".button");
    btns.forEach(function (btn, i) {
        if (event.currentTarget == btn) {
            btn.classList.add("active");
            // 현재 버튼이 "출발점" 버튼이고 활성 상태일 때 기능 실행
            if ( btn.id === "start") {
                // "출발점" 버튼이 활성 상태일 때 실행할 코드 추가
                kakao.maps.event.addListener(map, 'click', function (mouseEvent){
                    var latlng = mouseEvent.latLng;
                    startMarker.setPosition(latlng);
                });
            }
        } else {
            btn.classList.remove("active");
            console.log("출발점 버튼이 비활성화.");
            if (btn.id === "end"){
                kakao.maps.event.removeListener(map, 'click', function (mouseEvent){
                    var latlng = mouseEvent.latLng;
                    startMarker.setPosition(latlng);
                });
            }

        }
    });

이게 처음 만들었던 코드이고

이후

var clickHandler = function (mouseEvent){
var latlng = mouseEvent.latLng;
startMarker.setPosition(latlng);
}

function change_btn(event) {
    var btns = document.querySelectorAll(".button");
    btns.forEach(function (btn, i) {
        if (event.currentTarget == btn) {
            btn.classList.add("active");
            // 현재 버튼이 "출발점" 버튼이고 활성 상태일 때 기능 실행
            if ( btn.id === "start") {
                // "출발점" 버튼이 활성 상태일 때 실행할 코드 추가
                kakao.maps.event.addListener(map, 'click', clickHandler);
            }
        } else {
            btn.classList.remove("active");
            console.log("출발점 버튼이 비활성화.");
            if (btn.id === "end"){
                kakao.maps.event.removeListener(map, 'click', clickHandler);
            }

        }
    });

이처럼 수정 시 이벤트 작동 자체가 안되서 핸들러 이해를 제가 잘못 한건지 확인 부탁드립니다

2

먼저 디버깅으로 코드 동작을 확인해주셔야 될 것 같아요.
출발 버튼 클릭 후 도착 버튼을 눌렀을 때 btns가 [end, start]순으로 되어있다면
If문에서 event == btn 조건에 해당되서 btn.id가 end일 때 이벤트를 해제하는 로직이 필요한데
start만 판별하고 있어서 해제 없이 통과되고
그 다음 start 버튼에서는 else로 들어가지만 end만 확인하고 있어서 이 부분도 그냥 통과되고 있습니다.

원하는 시점에 클릭 이벤트가 정상적으로 해제가 안되고 있는 상황이라서
디버깅으로 코드 동작 확인하셔서 해제를 원하는 시점에 removeListener를 호출해주세요.

1개의 좋아요
3

아 그렇네요 디버깅 하니까 이해가 되네요 이렇게 간단한걸…
remove 적용 되도 다시 이벤트가 실행 되었네요
감사합니다 덕분에 해결했습니다

1개의 좋아요