터치 이벤트 관련 문의드립니다

안녕하세요, 현재 카카오 지도 API를 이용하여 서비스를 개발하고 있습니다.

일반 모니터에 터치 인식하는 장치를 연결하여 테스트를 진행하고 있습니다.

저희가 터치 이벤트가 필요한데, 일부 터치 이벤트가 잘 작동하지 않았습니다. 우선, 터치를 통해 드래그를 해서 지도를 움직이려고 하나 지도가 움직여지지 않고 두 손가락을 이용한 줌도 안되는 상태입니다. 그런데 터치 두번을 해서 지도가 확대 되는건 또 됩니다.

이런 저런 방법을 계속 해보니, User-Agent가 Android로 인식되는 경우에는 터치와 마우스 이벤트가 전부 인식이 되었습니다. 그래서 강제로 User-Agent를 변경해봤으나, 적용이 되지 않더라구요. 크롬에서 Device 옵션을 변경 후 새로고침을 해야만 적용이 되었습니다. 비슷한 문의들과 답변들을 확인했는데도 이해가 잘 되지 않아서 이렇게 문의를 남기게 되었습니다.

어떤 답변에서 마우스 포인터 이벤트와 터치 이벤트를 동시에 사용할 수 없다고 봤는데, 그러면 마우스 포인터 이벤트를 제외하고 터치 이벤트를 활성화 시킬 수 있는 방법이 있을까요? 어짜피 마우스 포인터는 필요가 없을 것 같아 터치 이벤트로만 사용을 해도 괜찮을 것 같아 그렇게 할 수 있는 방법이 궁금합니다.

  • kakao.maps.event.addListener(map, ‘dragstart’, function(){}); 옵션도 android로 활성화 되야만 작동을 하네요

안녕하세요,

예전 유사 문의 글을 찾아보면

Object.defineProperty(navigator, ‘userAgent’, {get: function () { return ‘Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Mobile Safari/537.36’; }})

이런 형태로 사용하셨던 분이 있는데 이걸로 UA 세팅이 안되는 건가요?
클릭과 터치 같이는 안되겠지만 터치로만 하는 건 됐던 것 같아서요

안녕하세요, 해당 방법으로 UA 셋팅을 하고 크롬 개발자 도구(F12)를 열어 콘솔 창에 navigator.userAgent() 를 실행시키면 Android로 변경이 된 것으로 나오지만 실제로 이벤트가 실행되지는 않더라구요.

다른 방법으로 시도했던게 크롬 개발자 도구 내 Toggle Device로 반응형으로 변경한 직후에는 적용이 되지 않으나, 새로 고침을 한 뒤에는 모든 터치 이벤트가 작동을 하더라구요. 아마 Android로 변경을 한 뒤에 카카오 지도 API 를 호출해야 적용이 되는 것처럼 보이는데. 혹시 카카오 지도 API 내에서 UA를 체크해서 이벤트를 다르게 분리하는지 궁금합니다. 또한 카카오 지도 API를 호출하기 이전에 Android로 변경하는 방법이 있을지도 궁금합니다.

  • 그리고 위에 알려주신 코드로는 변경이 안되어서
    window.navigator.defineGetter(‘userAgent’, function () {
    return ‘Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Mobile Safari/537.36’;
    });

UA는 이 코드로 변경하였습니다.

음 저는 터치가 되는 PC는 없어서
반대로 모바일 폰에서 PC 용 UA로 코드를 넣고 해보니까 터치가 막히던데…

@doji.doo @lea.ju
혹시 도움 주실 부분이 있을까요?