-
모바일 브라우저에서 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 일 경우 예외 처리}이벤트 버블링에 대해서는 웹에서 검색하면 관련 정보를 얻을 수 있으며,웹에서 이벤트 처리는 이벤트 캡처(상위엘리먼트 -> 하위엘리번트) 방식과 이벤트 버블링(하위엘리먼트 -> 상위엘리먼트) 가 있으며,이벤트 처리에 대한 기본 지식이므로 숙지해 두는 것이 좋을 듯 하다.'♣ Tech & Biz Salon > Tech' 카테고리의 다른 글
ie11 버젼 체크, ie여부 체크 (0) 2014.01.03 Fail to load the JNI shared library... jvm.dll (0) 2013.08.26 Windows7 64bit, Toad 11 사용시 Oracle Client 32bit 가 궁합 잘맞음 (0) 2013.07.26