모바일 브라우저에서 onclick 작동 안하는거 처리

[출처 미상]

모바일웹에서는 일반적으로 웹에서 사용하는 onclick 이벤트가 안 먹는 경우가 있으며,

터치스크린 환경에서 onclick 을 대체할 만한 이벤트로는 ontouchstart, ontouchend 정도가 있다.

 

보통 웹에서는 

<a onclick="func()">

이렇게 사용하지만, 화면에 여러 콤포넌트가 존재하고 각각 click 이벤트를 바인딩하고 있을 경우

click 이벤트를 모바일웹에서 인식하지 못 하는 경우가 있다.

 

이런 경우 

<a onclick="func()" ontouchend="func()">

와 같이 click 과 touchend 이벤트를 같이 사용하면 웹에서는 onclick 이벤트가 터치스크린에서는 ontouchend 이벤트가

작동하게 된다. touchstart 보다는 touchend 가 좀 더 부드럽게 작동하는 듯 하다.

 

참고로 이벤트 버블링 방식의 이벤트 처리일 경우 아래와 같이 디폴트 액션과 상위 엘리먼트로의 버블링을

막는 것이 필요할 수 있다. preventDefault() 는 해당 엘리먼트의 디폴트 액션을 막는 함수이다.

예를 들면 <a href="http://naver.com" onclick="func(event)"> 라고 하게 되면, func(event) 함수가 실행되고

href 속성의 url 로 이동하는 액션은 취소가 된다.

function func(evt) {

   var e = evt || window.event;

   var eTarget = e.target || e.srcElement;

 

   // 필요한 로직 수행

 

   if (e.preventDefault) e.preventDefault();               // IE 일 경우 예외 처리

   if (e.stopPropagation) e.stopPropagation();          // IE 일 경우 예외 처리

}

 

 

이벤트 버블링에 대해서는 웹에서 검색하면 관련 정보를 얻을 수 있으며, 

웹에서 이벤트 처리는 이벤트 캡처(상위엘리먼트 -> 하위엘리번트) 방식과 이벤트 버블링(하위엘리먼트 -> 상위엘리먼트) 가 있으며,

이벤트 처리에 대한 기본 지식이므로 숙지해 두는 것이 좋을 듯 하다.