Translate

2013년 11월 30일 토요일

[Mobile][Javascript] touch Event(touchstart, touchmove, touchend) 가 작동하지 않는경우




증상
  - touch Event 가 정상적으로 작동하지 않음
  - 디바이스 기종
      1) iPhone5(A1429) - Safari (iOS7)
      2) Galaxy S2LTE(SHV-E110S) - OEM browser (Android 4.0.3)
      3) Galaxy Tab 10.1(SHW-M380W) - OEM browser(Android 4.0.4)

대부분의 디바이스에서는 정상 작동 하지만 위의 두 디바이스에서 touch이벤트가 정상적으로 작동하지 않았다.
Galaxy 디바이스의 chrome browser 에서는 정상적으로 작동함.





원인
  - 특정 HTML 코드에서 발샘함. (Browser Bug 로 의심됨)

  - 나의경우에는 상단에 다음과 같이 스타일이 있었으며
     style="position:absolute; height:100%; overflow:hidden;"
    touch event 로 실행될 버튼의 상단에 P 태그 (<p>) 가 많이 들어있었다.

    1. 3개의 스타일 중 어떤것 한개라도 삭제하면 touch event 가 정상적으로 동작하였으며
    2. 본문의 P 태그를 많이 삭제하면 touch event 가 정상적으로 동작하였다.

=================================
2013.12.19 추가
기기: SHW-M380W
HTML 파일내에 딱히 의심될 만한 이상한것도 없지만 Touch Event 가 발생하지 않는 문제가 발생을 했다. (역시 Chrome 에서는 정상적으로 작동)

혹시나 싶어 ontouchstart="" 를 사용하니 말끔히 해결..;; -_-
honeycomb 에서 터치 안되는 문제 와는 다른 문제였다.
=================================
2014.01.15 추가
기기: SHW-M380S
Touch Event가 들어간 Element 에 ontouchstart="" 를 사용했으나 touch Event 발생하지 않음.

Script 로 Touch Event 넣은 Element의 Parent Element 에 ontouchstart="" 를 사용하니 정상작동
=================================


    하지만 위의 방법을 사용할 수는 없었다.
    고생끝에 우연히 해결방법을 찾았다.




해결방법
  - Touch Event 를 넣은 Element 의 Parent Elementontouchstart="" 를 입력한다.





댓글 없음 :

댓글 쓰기