모든 확대 / 축소 기능을 비활성화하지 않고 브라우저 (터치 장치에서)의 지정된 요소 에 대해 두 번 탭 확대 / 축소 기능 을 비활성화 하고 싶습니다 .
예 : 어떤 일이 일어나기 위해 하나의 요소를 여러 번 탭할 수 있습니다. 이것은 데스크톱 브라우저 (예상대로)에서는 잘 작동하지만 터치 장치 브라우저에서는 확대됩니다.
답변:
참고 (2020 년 8 월 4 일 기준) :이 솔루션은 iOS Safari v12 +에서 작동하지 않는 것 같습니다. iOS Safari를 다루는 명확한 솔루션을 찾으면이 답변을 업데이트하고이 메모를 삭제하겠습니다.
CSS 전용 솔루션
touch-action: manipulation다음 disable-dbl-tap-zoom클래스 와 같이 두 번 탭 확대 / 축소를 비활성화하려는 요소에 추가하십시오 .
.disable-dbl-tap-zoom {
touch-action: manipulation;
}
로부터 touch-action문서 (강조 광산) :
시장 조작
이동 및 핀치 확대 / 축소 동작을 활성화하지만 두 번 탭하여 확대 / 축소 와 같은 추가 비표준 동작은 비활성화 합니다.
이 값은 Android 및 iOS에서 작동합니다.
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
etc...
</head>
나는 최근에 그것을 사용했으며 iPad에서 잘 작동합니다. Android 또는 기타 장치에서 테스트하지 않았습니다 (웹 사이트가 iPad에만 표시되기 때문).
이것이 오래되었을 수 있다는 것을 알고 있지만 완벽하게 작동하는 솔루션을 찾았습니다. 미친 메타 태그가 필요없고 콘텐츠 확대 / 축소를 중지 할 필요가 없습니다.
교차 기기인지 100 % 확실하지 않습니다.,하지만 내가 원하는대로 정확히 작동했습니다.
$('.no-zoom').bind('touchend', function(e) {
e.preventDefault();
// Add your code here.
$(this).click();
// This line still calls the standard click event, in case the user needs to interact with the element that is being clicked on, but still avoids zooming in cases of double clicking.
})
이렇게하면 일반 탭 기능이 비활성화되고 표준 클릭 이벤트가 다시 호출됩니다. 이렇게하면 모바일 장치가 확대 / 축소되는 것을 방지 할 수 있지만 그렇지 않으면 정상적으로 작동합니다.
편집 : 이것은 이제 몇 개의 라이브 앱에서 시간 테스트를 거쳐 실행되었습니다. 100 % 크로스 브라우저 및 플랫폼 인 것 같습니다. 위의 코드는 클릭 이벤트 전에 사용자 지정 동작을 원하지 않는 한 대부분의 경우 복사-붙여 넣기 솔루션으로 작동 합니다.
pointer-events: none
일부 사람들은 답변 아래의 댓글을 읽지 않기 때문에 내 질문에 올바르게 대답하고 싶었습니다. 그래서 여기 있습니다 :
(function($) {
$.fn.nodoubletapzoom = function() {
$(this).bind('touchstart', function preventZoom(e) {
var t2 = e.timeStamp
, t1 = $(this).data('lastTouch') || t2
, dt = t2 - t1
, fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(this).trigger('click').trigger('click');
});
};
})(jQuery);
나는 이것을 쓰지 않고 단지 수정했습니다. 여기에서 iOS 전용 버전을 찾았습니다 : https://gist.github.com/2047491 (Kablam에게 감사드립니다)
두 번 탭 확대 / 축소를 전역 적으로 비활성화하는 CSS (모든 요소) :
* {
touch-action: manipulation;
}시장 조작
패닝 및 핀치 확대 / 축소 제스처를 활성화하지만 두 번 탭하여 확대 / 축소하는 것과 같은 추가 비표준 제스처는 비활성화합니다.
감사합니다 Ross, 내 대답은 그의 확장입니다 : https://stackoverflow.com/a/53236027/9986657
document.getElementById('root').addEventListener('click', () => {})
jQuery없이 작동 하는 버전이 필요한 경우 바닐라 JavaScript를 사용 하도록 Wouter Konecny의 답변 ( Johan Sundström 이 요점 을 수정하여 생성됨)을 수정 했습니다 .
function preventZoom(e) {
var t2 = e.timeStamp;
var t1 = e.currentTarget.dataset.lastTouch || t2;
var dt = t2 - t1;
var fingers = e.touches.length;
e.currentTarget.dataset.lastTouch = t2;
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
e.preventDefault();
e.target.click();
}그런 다음 touchstart이 함수를 호출 하는 이벤트 핸들러를 추가합니다 .
myButton.addEventListener('touchstart', preventZoom); myButton.addEventListener('touchstart', preventZoom);
이 다른 답변 https://stackoverflow.com/a/42288386/1128216에 설명 된대로 css 속성 touch-action을 none로 설정해야합니다.
.disable-doubletap-to-zoom {
touch-action: none;
}* {
-ms-touch-action: manipulation;
touch-action: manipulation;
}터치 스크린에서 확대 / 축소하려면 두 번 탭을 사용 중지합니다. 인터넷 익스플로러가 포함되어 있습니다.
간단한는의 기본 동작을 방지 click, dblclick또는 touchend이벤트는 줌 기능을 사용할 수 없게됩니다.
이 이벤트 중 하나에 대한 콜백이 이미있는 경우 event.preventDefault().
Vue.js를 사용 하여이 문제를 겪고있는 저와 같은 사람이 있다면 .prevent 를 추가하기 만하면 됩니다.@click.prevent="someAction"
이렇게하면 '본문'의 요소에서 두 번 탭 확대 / 축소를 방지 할 수 있으며 다른 선택기로 변경할 수 있습니다.
$('body').bind('touchstart', function preventZoom(e){
var t2 = e.timeStamp;
var t1 = $(this).data('lastTouch') || t2;
var dt = t2 - t1;
var fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1){
return; // not double-tap
}
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(e.target).trigger('click');
});그러나 이것은 또한 여러 번 클릭했을 때 클릭 이벤트가 트리거되는 것을 막았으므로 여러 클릭에서 이벤트를 트리거하기 위해 다른 이벤트를 바인딩해야했습니다.
$('.selector').bind('touchstart click', preventZoom(e) {
e.stopPropagation(); //stops propagation
if(e.type == "touchstart") {
// Handle touchstart event.
} else if(e.type == "click") {
// Handle click event.
}
});터치 스타트에서 확대 / 축소를 방지하고 클릭을 트리거하는 코드를 추가했습니다.
$('.selector').bind('touchstart, click', function preventZoom(e){
e.stopPropagation(); //stops propagation
if(e.type == "touchstart") {
// Handle touchstart event.
var t2 = e.timeStamp;
var t1 = $(this).data('lastTouch') || t2;
var dt = t2 - t1;
var fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1){
return; // not double-tap
}
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(e.target).trigger('click');
} else if(e.type == "click") {
// Handle click event.
"Put your events for click and touchstart here"
}
});<div>텍스트, 슬라이더 및 버튼 이있는 입력 컨테이너 영역이 있고 그 안에 실수로 두 번 탭하는 것을 방지하고 싶다고 가정합니다 <div>. 다음은 입력 영역의 확대 / 축소를 금지하지 않으며 내 <div>영역 을 두 번 탭하고 확대 / 축소하는 것과 관련이 없습니다 . 브라우저 앱에 따라 차이가 있습니다.
방금 시도했습니다.
(1) iOS의 Safari 및 Android의 Chrome의 경우 선호되는 방법입니다. 삼성의 인터넷 앱을 제외하고 작동합니다. 여기서는 전체 <div>가 아닌 탭을 처리하는 요소에서 이중 탭을 비활성화합니다 . 및 입력 return false에 대한 예외와 함께을 반환합니다 .textrange
$('selector of <div> input area').on('touchend',disabledoubletap);
function disabledoubletap(ev) {
var preventok=$(ev.target).is('input[type=text],input[type=range]');
if(preventok==false) return false;
}(2) 선택적으로 Android (5.1, Samsung)의 내장 인터넷 앱의 경우에서 두 번 탭하는 것을 <div>금지하지만 다음 에서 확대 / 축소는 금지합니다 <div>.
$('selector of <div> input area').on('touchstart touchend',disabledoubletap);(3) Android 5.1의 Chrome의 경우 두 번 탭을 전혀 비활성화하고 확대 / 축소를 금지하지 않으며 다른 브라우저에서 두 번 탭하는 작업을 수행하지 않습니다. 의 이중 탭 금지는 좋은 습관처럼 보이기 <meta name="viewport" ...>때문에 짜증이납니다 <meta name="viewport" ...>.
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=5, user-scalable=yes">CSS 터치 이벤트 사용 : 없음 모든 터치 이벤트를 완전히 제거합니다. 누군가가이 문제를 가지고있을 경우를 대비하여 여기에두면이 솔루션을 찾는 데 2 시간이 걸렸으며 CSS 한 줄뿐입니다. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action