기본 콘텐츠로 건너뛰기

5월, 2014의 게시물 표시

첫 플러그인 개발....heumRolling!!!!

필자는 홈피이지 개발할때 롤링 필요하면 플러그인 찾아서 커스텀마이징 하는게

너무싫어서 직접 짜버리는데 그게 매일매일 홈페이지마다 html 이쪽에 넣기 싫어서

플러그인을 처음 개발...

아직 많이 미흡하고 기본 기능밖에 없으니 ... 쓰실사람만 쓰시길...

버그리포트 받습니다 ㅎㅎ

시간날때마다 업데이터 할겁니다~~^^

링크를 클릭해서 다운받으세요 ^^

https://drive.google.com/folderview?id=0B2jnMJGFP3sENGhTUXB2b0REWDg&usp=sharing



감사합니다^^

html click 이벤트가 모바일에선 300ms가 느리다!!?

안녕하세요 광흠입니다.
이번 포스팅은 "html 클릭 이벤트가 모바일에선 왜 느릴까?" 주제로 하겠습니다


일단 동영상을 한번 시청해보시면 차이를 아실거라 생각이 듭니다
(youtube에서 찾은 비교 영상입니다.)

왼쪽은 일반 click이벤트이고 우측이 touch 영상입니다.

육안으로도 확연히 차이가 심합니다.

자료를 찾아보니 모바일에서는 더블탭이 될지도 모르기 때문에 300ms를 대기 시간으로 둔다더군요 그래서 모바일에선 touch 이벤트가 존재합니다

종류는 아래 보시면 되겠습니다


touchstart(스크린에 손가락이 닿았을때 발생한다)touchmove (스크린에 손가락이 닿아있고 움직일때 발생한다)touchend (스크린에서 손가락이 떨어졌을 경우 발생한다)touchcancel (시스템에서 이벤트를 취소시킬 때 발생하지만 브라우저마다 다르다)

이렇게 이벤트를 사용하여 반응형 웹 또는 모바일 웹을 제작할때 touch이벤트를 잘 사용하도록 하자.

여기서 주의할 점은 touch이벤트를 사용할때 컴퓨터의 웹에선 동작하지 않습니다.

그래서 click이벤트와 같이 사용을 해주셔야하는데요


Colored By Color Scripter 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(); })…