터치 감지를 시도하는 가장 큰 "gotcha"는 터치와 트랙 패드 / 마우스를 모두 지원하는 하이브리드 장치입니다. 사용자의 장치가 터치를 지원하는지 여부를 올바르게 감지 할 수 있더라도 실제로해야 할 일은 사용자가 현재 사용 중인 입력 장치를 감지하는 것 입니다. 이 도전에 대한 자세한 내용과 가능한 해결책이 있습니다. .
기본적으로 사용자가 방금 화면을 터치했는지 또는 마우스 / 트랙 패드를 대신 사용했는지 알아내는 방법 은 페이지에 a touchstart및 mouseover이벤트를 모두 등록하는 것입니다 .
document.addEventListener('touchstart', functionref, false) // on user tap, "touchstart" fires first
document.addEventListener('mouseover', functionref, false) // followed by mouse event, ie: "mouseover"
터치 동작은 이러한 이벤트를 모두 트리거하지만 전자 ( touchstart)는 항상 대부분의 장치에서 첫 번째입니다. 따라서이 예측 가능한 일련의 이벤트 can-touch를 고려하여 문서에서 현재 사용자 의 현재 입력 유형을 문서에 반영하기 위해 클래스를 문서 루트에 동적으로 추가하거나 제거하는 메커니즘을 작성할 수 있습니다 .
;(function(){
var isTouch = false //var to indicate current input type (is touch versus no touch)
var isTouchTimer
var curRootClass = '' //var indicating current document root class ("can-touch" or "")
function addtouchclass(e){
clearTimeout(isTouchTimer)
isTouch = true
if (curRootClass != 'can-touch'){ //add "can-touch' class if it's not already present
curRootClass = 'can-touch'
document.documentElement.classList.add(curRootClass)
}
isTouchTimer = setTimeout(function(){isTouch = false}, 500) //maintain "istouch" state for 500ms so removetouchclass doesn't get fired immediately following a touch event
}
function removetouchclass(e){
if (!isTouch && curRootClass == 'can-touch'){ //remove 'can-touch' class if not triggered by a touch event and class is present
isTouch = false
curRootClass = ''
document.documentElement.classList.remove('can-touch')
}
}
document.addEventListener('touchstart', addtouchclass, false) //this event only gets called when input type is touch
document.addEventListener('mouseover', removetouchclass, false) //this event gets called when input type is everything from touch to mouse/ trackpad
})();
자세한 내용은 여기를 참조 하십시오 .