[해결] iOS의 웹브라우저에서 event delegation 지정해보신분 계신가요?

똑같은 코드인데 일반 pc나 안드로이드에서는 괜찮은데, iOS의 크롬, 사파리, 앱의 웹뷰에서는
event delegation을 건 영역(클릭을 걸었습니다)이 계속 눌리는 효과가 나서 영 이상해보여서요…ㅜㅜ

첨부한 링크를 iOS의 safari나 chrome에서 보시면,
파란 영역의 “테스트” 버튼과 위키 이미지에 클릭 이벤트를 걸었고
빨간 영역은 빨간 영역 자체에 클릭 event delegation을 걸어서, e.target이 “버튼”, 위키 이미지일 때 뭔가를 하라는 것을 지정했는데
빨간색 영역의 아무곳을 그냥 누르면 버튼처럼 눌러지는 것처럼 보여져서…멘붕중입니다 ㅜ

관련해서 경험해보시거나, 해결해보신분 계실까요?

iOS 자체의 문제인지는 잘 모르겠지만 e.target 대신에 e.currentTarget을 써보시는게 어떨까요?

답변 감사드립니다.

해당 이슈는 안드로이드, PC웹에서는 발생하지 않고, iOS에서만 발생하는 이슈 입니다.
코드를 보시면 아시겠지만, 상위의 div에 event를 걸고,
event delegation으로 하위 노드에서 이벤트를 캐치하는 것이기 때문에
e.target을 쓸 수 밖에 없었습니다. e.currentTarget을 쓴다는건 delegation이 아니겠지요.

결국, css의 도움을 받아서 해결했습니다.
해당 div에
-webkit-tap-highlight-color: rgba(0,0,0,0);
를 추가해주니까 클릭 효과가 나지 않네요!

2 Likes