iOS 12 WKWebView의 addEventListener 버그 해결 방법 먹통, 딜레이

addEventListener 버그?

iOS 12에서 WKWebview를 사용한 앱에서 addEventListener 버그가 있어서 공유를 해보려 합니다. addEventListener는 웹 개발에서 이벤트를 관리하기 위한 핵심적인 JavaScript 메소드입니다. 그러나 iOS 12에서 WKWebView를 사용할 때 addEventListener에 딜레이가 발생하는 버그가 보고된 바 있습니다. 이는 특히 사용자 인터랙션에 의존하는 웹 애플리케이션에서 뚜렷하게 나타납니다.

addEventListener 버그 문제 상황

A 태그의 이벤트가 실행될때, 추가적인 기능이 필요한 상황이라 addEventListener를 사용하여 별도의 이벤트를 만들었습니다. 그런데 웹 페이지 내 A태그 요소를 클릭했을 때, addEventListener로 등록된 이벤트가 즉각적으로 반응하지 않고 지연되는 현상이 발생합니다.

수정 전 코드 :

// 수정 전 코드
aTag.addEventListener('click', function() {
    console.log('click add Event');
    event.preventDefault();
    return;                                
});

수정 후 코드

// 수정 후 코드
aTag.addEventListener('touchend', function() {
    console.log('click add Event');
    event.preventDefault();
    return;                                
});

수정 전과 후, 네 click -> touchend 이벤트만 변경을 했더니 해결 되었습니다. 최근 iOS 12버전 사용 빈도도 낮고, javascript를 하는 일이 거의 없다보니 옛 자료들을 찾아 한다는게 이런 이슈가 발생 하였습니다.

iOS 12에서 WKWebView를 사용할 때 click 이벤트와 관련된 문제가 발생할 수 있습니다. 특히, 이전 버전의 iOS에 비해 click 이벤트의 반응 속도가 느려지거나, 특정 상황에서 이벤트가 전혀 발생하지 않는 경우가 보고되었습니다. 이는 touchstart나 touchend 이벤트를 대신 사용하여 해결할 수 있습니다. 또한, 일부 JavaScript 기능이 제대로 동작하지 않거나 CSS에 의한 스타일 변화가 지연되는 현상도 관찰되었습니다.

개발자 커뮤니티에서는 이러한 문제를 회피하기 위해 여러 가지 임시 방편을 제시하곤 합니다. 예를 들어, 가상의 커서 이벤트를 감지하여 click 이벤트를 강제로 발생시키거나, CSS의 cursor: pointer; 속성을 추가하여 웹페이지의 특정 요소들이 더 잘 반응하도록 하는 방법이 있습니다. 그러나 이러한 방법들은 문제를 완전히 해결하기보다는 일시적으로 회피하는 방안이므로, 애플이 제공하는 업데이트를 통해 문제가 해결되기를 기대하는 것이 좋습니다.

addEventListener의 click, touchend 이벤트 비교

저 같은 경우는 touchend 이벤트를 써서 해결 했으나, touchstart 이벤트를 사용해도 무방합니다.

touchstart와 touchend 이벤트는 사용자가 손으로 터치를 했을 때, 터치한 손을 떼었을 때의 차이만 있을 뿐, 정교한 작업의 요구가 아니면 동작의 큰 차이는 없습니다.

다음은 문제가 된 이벤트 비교 입니다.

이 표는 click 이벤트와 touchend 이벤트를 addEventListener로 사용할 때의 주요 차이점을 요약한 것입니다. 모바일 환경, 특히 iOS 기기에서 빠른 반응을 원한다면 touchend 이벤트가 더 적합할 수 있습니다. 그러나 데스크탑 환경을 포함하여 모든 사용자에게 일관된 경험을 제공하고 싶다면 click 이벤트가 더 적합할 수 있습니다.

iOS 12이상에서 touchend 이벤트 이슈

iOS 12 이상 버전에서 touchend 이벤트로 변경했을 때의 기능 차이와 알려진 이슈는 다음과 같습니다:

기능 차이:

• touchend 이벤트는 사용자가 화면을 눌렀다가 떼는 순간 바로 발생하기 때문에, click 이벤트보다 반응 속도가 빨라집니다.
• iOS 12 이상에서는 click 이벤트에 비해 touchend 이벤트가 더 즉각적인 피드백을 제공하며, 사용자 인터페이스의 반응성을 개선합니다.
• touchend 이벤트는 터치 기반의 인터랙션에 최적화되어 있어, 모바일 기기 사용자에게 더 자연스러운 경험을 제공합니다.

알려진 이슈:

• 일부 경우에 touchend 이벤트가 click 이벤트에 비해 예상치 못한 방식으로 동작할 수 있습니다. 예를 들어, 스크롤 중에 터치가 끝나는 경우 이벤트가 발생하지 않을 수 있습니다.
• touchend 이벤트는 드래그 앤 드롭과 같은 복잡한 터치 기반의 인터랙션에서는 click 이벤트보다 정교한 처리가 필요할 수 있습니다.
• click 이벤트에 비해 touchend 이벤트는 고스트 클릭(ghost click)과 같은 이슈를 발생시킬 수 있는데, 이는 터치 이벤트 후에 불필요한 클릭 이벤트가 발생하는 현상입니다.
• iOS에서는 touchend 이벤트가 click 이벤트보다 먼저 발생하기 때문에, 두 이벤트를 혼용할 때는 이러한 순서를 고려해야 합니다.
• 웹 애플리케이션에서 touchend를 사용할 때, 특정 HTML 요소들이 focus 상태가 되지 않아서 스타일이나 액세스 가능성 문제가 발생할 수 있습니다.

이러한 이슈와 차이점들은 주로 개발자들 사이의 경험과 커뮤니티 포럼, 문제 추적 시스템에서 공유되는 정보를 바탕으로 합니다. 따라서 앱이나 웹사이트를 iOS에서 실행할 때는 이런 점들을 고려하여 테스트와 조정을 충분히 해야 합니다.

추천 글 더보기

• swift 와 objective-c 차이