ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 모바일 브라우저에서 onclick 작동 안하는거 처리
    ♣ Tech & Biz Salon/Tech 2014. 1. 2. 16:50

    [출처 미상]


    모바일웹에서는 일반적으로 웹에서 사용하는 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 일 경우 예외 처리
    }
     
     
    이벤트 버블링에 대해서는 웹에서 검색하면 관련 정보를 얻을 수 있으며, 
    웹에서 이벤트 처리는 이벤트 캡처(상위엘리먼트 -> 하위엘리번트) 방식과 이벤트 버블링(하위엘리먼트 -> 상위엘리먼트) 가 있으며,
    이벤트 처리에 대한 기본 지식이므로 숙지해 두는 것이 좋을 듯 하다.


Designed by Tistory.