ios safari tap event bug

a tag에 javascript로 이벤트를 추가하는경우 의도와 다르게 이벤트가 한번에 동작하지 않거나 아에 동작을 하지 않는 경우가 있다.

이벤트 동작 원리

• a tag에 hover 스타일이 있는경우 : 한번 tap할 경우 ios safari는 hover 이벤트를 수행하고 버블링 이벤트가 발생하지 않는다.
• label에 이벤트를 추가한 경우 : 해당 이벤트는 무시되고 label에 연결된 inpupt에 active를 활성화 하고 종료 된다.
• button에 toggle 이벤트를 추가한 경우 : 최초 한번만 실행되고 포커스가 벗어 나지 않는 경우 재실행 되지 않는다.

해결방안

• 별도의 자바스크립트 라이브러리를 이용하여 tap 이벤트를 구현한다.
• hover효과를 제공하는 경우 별도의 이벤트를 스크립트로 구현하여 제공하고 hover style 을 제거한다.
• • hover = tap, click = doubletap
• label 및 자식 노드에 대하여 이벤트를 추가할때에는 상위 상위 요소에 대하여 이벤트를 추가하고 자식요소의 속성 및 값을 컨트롤 하여 구현한다.

주의사항

• 버블링 이벤트가 발생하지 않는다.
• a tag는 목적에 맏는 링크요소로 사용한다.