Click 이벤트 발생시 mouseout 이벤트 중지하는법 문의

kakao api로 여기저기 찾아보며 짜집기 해서 겨우 오버레이 띄우는거 까진 성공했는데
mouseover, mouseout, click 기능을 넣어 over와 out은 평상시 작동하고 click하였을시 mouseout기능이 작동을 중지하고
닫기 기능을 사용하여 닫았을때 다시 기능이 작동하도록 만들고 싶은데 몇일동안 고민했는데 잘 안되네요…
일단 예제에 있는 css넣고 글자 넣어서 작동 시켜보고 있습니다… 조언좀 해주세요

그사이 코드 몇개 더 집어넣어서 조금 바뀌었습니다 다시 수정 했습니다

<script type="text/javascript"
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f5efbb76984a690f184a2122f9ccc6c0"></script>
<script>
    var mapContainer = document.getElementById('map'), // 지도의 중심좌표
        mapOption = {
            center: new kakao.maps.LatLng(33.451475, 126.570528), // 지도의 중심좌표
            level: 3 // 지도의 확대 레벨
        };

    var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

    // 지도에 마커를 표시합니다 
    var positions = [
        {
            content: '<div class="wrap">' +
                '    <div class="info">' +
                '        <div class="title">' +
                '            카카오 스페이스닷원' +
                '            <div class="close" onclick="closeOverlay(0)" title="닫기" id=""></div>' +
                '        </div>' +
                '        <div class="body">' +
                '            <div class="img">' +
                '                <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
                '           </div>' +
                '            <div class="desc">' +
                '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
                '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
                '                <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
                '            </div>' +
                '        </div>' +
                '    </div>' +
                '</div>',
            latlng: new kakao.maps.LatLng(33.450705, 126.570677)
        },
        {
            content: '<div class="wrap">' +
                '    <div class="info">' +
                '        <div class="title">' +
                '            카카오 스페이스닷원' +
                '            <div class="close" onclick="closeOverlay(1)" title="닫기" id=""></div>' +
                '        </div>' +
                '        <div class="body">' +
                '            <div class="img">' +
                '                <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
                '           </div>' +
                '            <div class="desc">' +
                '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
                '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
                '                <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
                '            </div>' +
                '        </div>' +
                '    </div>' +
                '</div>',
            latlng: new kakao.maps.LatLng(33.450936, 126.569477)
        },
        {
            content: '<div class="wrap">' +
                '    <div class="info">' +
                '        <div class="title">' +
                '            카카오 스페이스닷원' +
                '            <div class="close" onclick="closeOverlay(2)" title="닫기" id=""></div>' +
                '        </div>' +
                '        <div class="body">' +
                '            <div class="img">' +
                '                <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
                '           </div>' +
                '            <div class="desc">' +
                '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
                '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
                '                <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
                '            </div>' +
                '        </div>' +
                '    </div>' +
                '</div>',
            latlng: new kakao.maps.LatLng(33.450879, 126.569940)
        },
        {
            content: '<div class="wrap">' +
                '    <div class="info">' +
                '        <div class="title">' +
                '            카카오 스페이스닷원' +
                '            <div class="close" onclick="closeOverlay(3)" title="닫기" id=""></div>' +
                '        </div>' +
                '        <div class="body">' +
                '            <div class="img">' +
                '                <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
                '           </div>' +
                '            <div class="desc">' +
                '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
                '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
                '                <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
                '            </div>' +
                '        </div>' +
                '    </div>' +
                '</div>',
            latlng: new kakao.maps.LatLng(33.451393, 126.570738)
        }
    ];

    // 마커 위에 커스텀오버레이를 표시합니다
    // 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
    var clickedOverlay = null;
    var overlays = [];
    for (var i = 0; i < positions.length; i++) {

        // 마커를 생성합니다
        var marker = new kakao.maps.Marker({
            map: map, // 마커를 표시할 지도
            position: positions[i].latlng // 마커의 위치
        });

        (function (mark) {

            var overlay = new kakao.maps.CustomOverlay({
                content: positions[i].content,
                map: map,
                position: mark.getPosition()
            });
            overlays.push(overlay);
            //마커를 클릭했을 때 커스텀 오버레이를 표시합니다
            //  kakao.maps.event.addListener(mark, 'mouseover', function () {
            //      overlay.setMap(map);
            //  });
            // kakao.maps.event.addListener(mark, 'mouseout', function () {
            //     overlay.setMap(null); 
            // });
            kakao.maps.event.addListener(mark, 'click', function () {
                if (clickedOverlay) {
                    clickedOverlay.setMap(null);
                }
                overlay.setMap(map);
                clickedOverlay = overlay;
            });

            closeOverlay(i);
        })(marker);

    }

    // 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 
    function closeOverlay(pos) {
        overlays[pos].setMap(null);
    }


</script>

먼저 클릭 상태를 확인할 수 있는 변수를 선언해주세요.
click 이벤트에서 변수 값을 true로 변경하고 mouseover, mouseout 이벤트에서는 해당 변수값이 true 인 경우
return false; 를 해서 이벤트 실행을 막아주세요.
closeOverlay 함수에서 변수 값을 false로 변경하면 mouseout, mouseover 이벤트가 다시 발생하게 됩니다.

var isClick = false;

kakao.maps.event.addListener(mark, 'mouseover', function () {
    if(isClick) {return;}
    overlay.setMap(map);
});
    
kakao.maps.event.addListener(mark, 'mouseout', function () {
    if(isClick) {return;}
    overlay.setMap(null); 
});
    
kakao.maps.event.addListener(mark, 'click', function () {
    if(!isClick) {
        isClick = true;
    }
    /* ... */
});

function closeOverlay(pos) {
     isClick = false;
     overlays[pos].setMap(null);
}

답변 감사합니다 잘 해결되었습니다