안녕하세요 광흠입니다.
이번 포스팅은 "html 클릭 이벤트가 모바일에선 왜 느릴까?" 주제로 하겠습니다
일단 동영상을 한번 시청해보시면 차이를 아실거라 생각이 듭니다
(youtube에서 찾은 비교 영상입니다.)
왼쪽은 일반 click이벤트이고 우측이 touch 영상입니다.
육안으로도 확연히 차이가 심합니다.
자료를 찾아보니 모바일에서는 더블탭이 될지도 모르기 때문에 300ms를 대기 시간으로 둔다더군요 그래서 모바일에선 touch 이벤트가 존재합니다
종류는 아래 보시면 되겠습니다
- touchstart (스크린에 손가락이 닿았을때 발생한다)
- touchmove (스크린에 손가락이 닿아있고 움직일때 발생한다)
- touchend (스크린에서 손가락이 떨어졌을 경우 발생한다)
- touchcancel (시스템에서 이벤트를 취소시킬 때 발생하지만 브라우저마다 다르다)
이렇게 이벤트를 사용하여 반응형 웹 또는 모바일 웹을 제작할때 touch이벤트를 잘 사용하도록 하자.
여기서 주의할 점은 touch이벤트를 사용할때 컴퓨터의 웹에선 동작하지 않습니다.
그래서 click이벤트와 같이 사용을 해주셔야하는데요
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//모바일에서 touch이벤트와 click이벤트가 같이 발생할때 click을 취소하는 펑션입니다.
function eventHandler(event, selector) {//
event.stopPropagation();
event.preventDefault();
if (event.type === 'touchend'){
selector.off('click');
}
}
//위의 평션은 이렇게 이벤트와 element를 넘겨주시면 되겠습니다.
$(selector).on('touchend click', function(event) {
eventHandler(event, $(this));
nextMenu();
});
|
이상으로 포스팅을 마치겠습니다 ^^
감사합니다.
댓글
댓글 쓰기