모바일 Safari는 링크 / 버튼을 클릭 할 때부터 이벤트가 시작될 때까지 클릭 이벤트에 300ms 지연이 있다는 것을 읽었습니다 . 지연의 이유는 사용자가 더블 클릭을 하려는지 확인하기 위해 기다리는 것이지만 UX 관점에서 300ms를 기다리는 것은 종종 바람직하지 않습니다.
이 300ms 지연을 제거하는 한 가지 해결책 은 jQuery Mobile “탭”처리를 사용하는 것입니다. 불행히도 저는이 프레임 워크에 익숙하지 않으며 touchend
올바른 방식으로 적용 되는 코드 한두 줄만 필요한 경우 큰 프레임 워크를로드하고 싶지 않습니다 .
많은 사이트와 마찬가지로 내 사이트에는 다음과 같은 많은 클릭 이벤트가 있습니다.
$("button.submitBtn").on('click', function (e) {
$.ajaxSubmit({... //ajax form submisssion
});
$("a.ajax").on('click', function (e) {
$.ajax({... //ajax page loading
});
$("button.modal").on('click', function (e) {
//show/hide modal dialog
});
제가하고 싶은 것은 다음과 같은 단일 코드 스 니펫을 사용하여 모든 클릭 이벤트 에서 300ms 지연을 제거하는 것입니다 .
$("a, button").on('tap', function (e) {
$(this).trigger('click');
e.preventDefault();
});
그게 나쁜 / 좋은 생각인가요?
답변
이제 일부 모바일 브라우저는 뷰포트를 설정하면 300ms의 클릭 지연을 제거합니다. 더 이상 해결 방법을 사용할 필요가 없습니다.
<meta name="viewport" content="width=device-width, user-scalable=no">
현재 지원되는 Android 용 Chrome입니다 . 안드로이드 파이어 폭스 와 iOS 용 사파리
그러나 iOS Safari에서는 에서 두 번 탭은 확대 / 축소 할 수없는 페이지에서 스크롤 제스처입니다. 이러한 이유로 그들은 300ms 지연을 제거 할 수 없습니다 . 확대 / 축소 할 수없는 페이지에서 지연을 제거 할 수없는 경우 확대 / 축소 가능한 페이지에서 제거 할 가능성이 낮습니다.
Windows Phone 은 또한 확대 할 수없는 페이지에서 300ms 지연을 유지하지만 iOS와 같은 대체 제스처가 없으므로 Chrome 에서처럼 이러한 지연을 제거 할 수 있습니다.다음을 사용하여 Windows Phone에서 지연을 제거 할 수 있습니다.
html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
출처 : http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
업데이트 2015 년 12 월
지금까지 iOS의 WebKit과 Safari는 사람들이 두 번 탭하여 페이지를 확대 할 수 있도록 한 번의 탭으로 링크 나 버튼을 활성화하기까지 350ms의 지연이있었습니다. Chrome은 이미 몇 달 전에이를 감지하기 위해 더 스마트 한 알고리즘을 사용하여이를 변경했으며 WebKit은 유사한 접근 방식을 따를 것 입니다. 이 기사는 브라우저가 터치 제스처와 함께 작동하는 방식과 브라우저가 오늘날보다 훨씬 더 똑똑해질 수있는 방법에 대한 훌륭한 통찰력을 제공합니다.
2016 년 3 월 업데이트
iOS 용 Safari에서는 두 번째 탭을 감지하는 350ms의 대기 시간이 “빠른 탭”응답을 생성하기 위해 제거되었습니다. width = device-width 또는 user-scalable = no로 뷰포트를 선언하는 페이지에 대해 활성화됩니다. 작성자는 여기에touch-action: manipulation
설명 된대로 CSS 를 사용하여 특정 요소에 대한 빠른 탭 동작을 선택할 수도 있습니다 ( ‘Styling Fast-Tap Behavior’제목으로 스크롤) 및 here .
답변
Financial Times에서 개발 한이 플러그인 -FastClick 은 완벽하게 작동합니다!
추가해야합니다. event.stopPropagation();
event.preventDefault();
클릭 기능 하거나 바로 뒤에 합니다. 그렇지 않으면 나처럼 두 번 실행될 수 있습니다.
$("#buttonId").on('click',function(event){
event.stopPropagation(); event.preventDefault();
//do your magic
});
답변
나는 이것이 오래되었다는 것을 알고 있지만 브라우저에서 “터치”가 지원되는지 테스트 할 수는 없습니까? 그런 다음 “touchend”또는 “click”변수를 만들고 해당 변수를 요소에 바인딩되는 이벤트로 사용 하시겠습니까?
var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click';
$('#element').on(clickOrTouch, function() {
// do something
});
따라서 코드 샘플은 브라우저에서 “touchend”이벤트가 지원되는지 확인하고 그렇지 않은 경우 “click”이벤트를 사용합니다.
(편집 : “touchend”를 “ontouchend”로 변경)
답변
저는 Hammer.js (Github 페이지) 라는 매우 인기있는 대안을 발견 했는데 이것이 최선의 접근 방식이라고 생각합니다.
Hammer.js는 Fastclick.js (가장 찬성 응답)보다 더 완전한 기능을 갖춘 터치 라이브러리 (많은 스 와이프 명령이 있음)입니다.
하지만주의하세요 : 모바일 장치에서 빠르게 스크롤하면 Hammer.js 또는 Fastclick.js를 사용할 때 UI가 실제로 잠기는 경향이 있습니다. 사이트에 뉴스 피드 또는 사용자가 많이 스크롤하는 인터페이스 (대부분의 웹 앱처럼 보임)가있는 경우 이는 주요 문제입니다. 이러한 이유로 저는 현재 이러한 플러그인을 사용하지 않습니다.
답변
어쨌든 확대 / 축소를 비활성화하면이 작은 지연이 비활성화되는 것 같습니다. 이제 더 이상 두 번 탭할 필요가 없으므로 이해가됩니다.
모바일 웹 페이지에서 확대 / 축소를 “비활성화”하려면 어떻게합니까?
그러나 이것이 가져올 사용성 영향에 유의하십시오. 앱으로 설계된 웹 페이지에는 유용 할 수 있지만보다 일반적인 용도의 ‘정적’페이지 IMHO에는 사용해서는 안됩니다. 낮은 대기 시간이 필요한 애완 동물 프로젝트에 사용합니다.
답변
안타깝게도 이렇게하는 쉬운 방법은 없습니다. 그러니 그냥 사용 touchstart
또는 touchend
예를 들어 버튼을 클릭 할 때 스크롤 사람이 시작 같은 다른 문제에 당신을 떠날 것입니다. 우리 는 한동안 zepto 를 사용하는데 ,이 정말 좋은 프레임 워크에서도 시간이 지남에 따라 몇 가지 문제가 발생했습니다. 많은 사람들이 닫혀 있지만 간단한 해결책의 분야가 아닌 것 같습니다.
링크에 대한 클릭을 전 세계적으로 처리하는이 솔루션이 있습니다.
$(document.body).
on('tap', 'a',function (e) {
var href = this.getAttribute('href');
if (e.defaultPrevented || !href) { return; }
e.preventDefault();
location.href= href;
}).
on('click', 'a', function (e) {
e.preventDefault();
});
답변
jquery없이 fastclick 라이브러리없이 쉬운 방법을 찾았습니다. 이것은 나를 위해 작동합니다.
var keyboard = document.getElementById("keyboard");
var buttons = keyboard.children;
var isTouch = ("ontouchstart" in window);
for (var i=0;i<buttons.length;i++) {
if ( isTouch ) {
buttons[i].addEventListener('touchstart', clickHandler, false);
} else {
buttons[i].addEventListener('click', clickHandler, false);
}
}
