programing

JavaScript를 사용하여 '터치 스크린' 장치를 감지하는 가장 좋은 방법은 무엇입니까?

sourcejob 2022. 11. 5. 17:33
반응형

JavaScript를 사용하여 '터치 스크린' 장치를 감지하는 가장 좋은 방법은 무엇입니까?

데스크톱과 모바일 기기 모두에서 사용할 수 있는 jQuery 플러그인을 작성했습니다.JavaScript로 터치스크린 기능 여부를 검출할 수 있는 방법이 있는지 궁금했습니다.jquery-mobile.js를 사용하여 터치스크린 이벤트를 검출하고 있으며 iOS, Android 등에서도 동작하고 있습니다만, 사용자의 단말기에 터치스크린이 있는지 여부에 따라 조건문을 작성하고 싶습니다.

그게 가능한가요?

갱신 2021

오래된 답변을 보려면: 이력을 확인하십시오.역사를 포스트에 남겨두면 감당할 수 없게 되어 다시 시작하기로 결심했습니다.

당초의 답변에서는, Modernizr가 사용하고 있던 것과 같은 기능을 사용하는 것이 좋을지도 모른다고 하고 있었습니다만, 이 PR:https://github.com/Modernizr/Modernizr/pull/2432의 「부당금」테스트를 삭제했기 때문에, 이 기능은 더 이상 유효하지 않습니다.왜냐하면, 혼란스러운 주제이기 때문입니다.

이 방법은 브라우저에 "터치 기능"이 있는지 여부를 검출하는 매우 적절한 방법입니다.

function isTouchDevice() {
  return (('ontouchstart' in window) ||
     (navigator.maxTouchPoints > 0) ||
     (navigator.msMaxTouchPoints > 0));
}

그러나 이 주제에 대해 저보다 훨씬 더 똑똑한 사람들이 쓴 고급 사용 사례에 대해서는 다음 기사를 읽는 것이 좋습니다.

업데이트: 기능 검출 라이브러리 전체를 프로젝트에 도입하기 전에 아래 blmstr의 답변을 읽어보십시오.실제 터치 서포트의 검출은 보다 복잡합니다.Modernizr에서는 기본적인 사용 사례만을 다루고 있습니다.

Modernizr은 모든 사이트에서 모든 종류의 기능을 검출할 수 있는 뛰어난 경량 방법입니다.

각 기능의 html 요소에 클래스를 추가할 뿐입니다.

그런 다음 CSS 및 JS에서 이러한 기능을 쉽게 대상으로 할 수 있습니다.예를 들어 다음과 같습니다.

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

Javascript(jQuery 예제):

$('html.touch #popup').hide();

Windows Phone 8/WinRT에서는 모더니즈가 IE10을 검출하지 않기 때문에 다음과 같은 간단한 크로스 브라우저 솔루션이 있습니다.

var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

단말기가 갑자기 터치를 지원하거나 지원하지 않으므로 한 번만 확인하면 되므로 변수에 저장하면 여러 번 효율적으로 사용할 수 있습니다.

인터랙션 미디어 기능이 도입되었기 때문에, 다음의 조작을 간단하게 실시할 수 있습니다.

if(window.matchMedia("(pointer: coarse)").matches) {
    // touchscreen
}

https://www.w3.org/TR/mediaqueries-4/ #descdef-media-any-flash

업댓댓 ( 댓댓댓댓::: )위의 솔루션은 "저밀도 포인터"(일반적으로 터치 스크린)가 주요 입력 장치인지 여부를 감지하는 것입니다.있는 , 는, 「」를 사용해 주세요.any-pointer: coarse★★★★★★ 。

자세한 내용은 여기를 참조하십시오.브라우저에 마우스가 없고 터치만 가능한 것을 검출합니다.

위의 모든 코멘트를 사용하여, 제 요구에 맞는 다음의 코드를 조립했습니다.

var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));

iPad, Android(브라우저 및 크롬), Blackberry Playbook, iPhone 4s, Windows Phone 8, IE 10, IE 8, IE 10(터치스크린 포함 Windows 8), Opera, Chrome 및 Firefox에서 테스트했습니다.

현재 Windows Phone 7에서 장애가 발생하여 아직 해당 브라우저의 솔루션을 찾을 수 없습니다.

누군가 이것을 유용하게 찾길 바란다.

난 이게 좋아.

function isTouchDevice(){
    return window.ontouchstart !== undefined;
}

alert(isTouchDevice());

Modernizr를 사용하면 매우 사용하기 쉽다.Modernizr.touch앞서 말한 바와 같이

저는 ,, 음, 음, 음, 다, 다, 음, 음, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, however,Modernizr.touch안전을 위해 사용자 에이전트 테스트도 실시합니다.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Modernizr을 간단히 할 수 .Modernizr.touch의 기능을 ('ontouchstart' in document.documentElement)

사용자 해 주십시오.iemobile는, 검출된 를 Microsoft 모바일 디바이스보다 .Windows Phone.

SO 질문도 참조해 주세요.

modernizr 구현을 시도했지만 터치 이벤트를 감지하는 데 일관성이 없습니다(IE 10은 터치 이벤트를 삭제하고 포인터 api를 추가했기 때문에 IE 11은 작동합니다).

그래서 우리는 사용자의 입력 유형을 알 수 없는 한 웹사이트를 터치 사이트로 최적화하기로 결정했습니다.이것은 다른 어떤 솔루션보다 신뢰성이 높습니다.

당사의 조사에 따르면 대부분의 데스크톱 사용자는 클릭하기 전에 마우스를 화면 위로 이동하기 때문에 사용자가 클릭하거나 마우스를 움직이기 전에 이를 감지하고 동작을 변경할 수 있습니다.

다음은 당사의 코드를 간략화한 버전입니다.

var isTouch = true;
window.addEventListener('mousemove', function mouseMoveDetector() {
    isTouch = false;
    window.removeEventListener('mousemove', mouseMoveDetector);
});

Touch Screen이 있는지 확인하는 것보다 더 좋은 점은 사용 여부를 확인하는 것입니다.또한 확인도 간단합니다.

if (window.addEventListener) {
    var once = false;
    window.addEventListener('touchstart', function(){
        if (!once) {
            once = true;
            // Do what you need for touch-screens only
        }
    });
}

현용 바이올린

나는 이렇게 해냈다.

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

if(isTouchDevice()===true) {
    alert('Touch Device'); //your logic for touch device
}
else {
    alert('Not a Touch Device'); //your logic for non touch device
}

Windows Surface 태블릿에서도 잘 동작합니다!!!

function detectTouchSupport {
msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture,
touchSupport = (( "ontouchstart" in window ) || msGesture || window.DocumentTouch &&     document instanceof DocumentTouch);
if(touchSupport) {
    $("html").addClass("ci_touch");
}
else {
    $("html").addClass("ci_no_touch");
}
}

터치 감지를 시도할 때 가장 큰 "감지"는 터치와 트랙패드/마우스를 모두 지원하는 하이브리드 장치에 있습니다.사용자의 장치가 터치를 지원하는지 여부를 올바르게 감지할 수 있더라도 사용자가 현재 사용하고 있는 입력 장치를 감지해야 합니다. 과제와 가능한 해결책에 대한 자세한 내용을 여기에 기재되어 있습니다.

으로 사용자가 했을 뿐인지 사용했는지 은 두 가지 입니다.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
})();

자세한 것은 이쪽.

저는 위의 코드 조각을 터치 여부를 감지하기 위해 사용했기 때문에 제 팬시박스 iframes가 터치되지 않고 데스크탑 컴퓨터에 표시됩니다.Android 4.0용 Opera Mini는 blmstr 코드만 사용해도 아직 비터치 기기로 등록이 되어 있는 것을 알 수 있었습니다.(이유를 알고 계신 분)

사용 결과:

<script>
$(document).ready(function() {
    var ua = navigator.userAgent;
    function is_touch_device() { 
        try {  
            document.createEvent("TouchEvent");  
            return true;  
        } catch (e) {  
            return false;  
        }  
    }

    if ((is_touch_device()) || ua.match(/(iPhone|iPod|iPad)/) 
    || ua.match(/BlackBerry/) || ua.match(/Android/)) {
        // Touch browser
    } else {
        // Lightbox code
    }
});
</script>

사실 저는 이 질문을 조사해서 모든 상황을 고려했습니다. 왜냐하면 그것은 제 프로젝트에서도 큰 이슈이기 때문입니다.다음 기능에 도달하면 모든 디바이스의 모든 브라우저 버전에서 작동합니다.

const isTouchDevice = () => {
  const prefixes = ['', '-webkit-', '-moz-', '-o-', '-ms-', ''];
  const mq = query => window.matchMedia(query).matches;

  if (
    'ontouchstart' in window ||
    (window.DocumentTouch && document instanceof DocumentTouch)
  ) {
    return true;
  }
  return mq(['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join(''));
};

힌트: 확실히isTouchDevice ""를 반환한다.boolean★★★★★★ 。

투고를 확인해 주세요.터치 디바이스가 검출되었을 때의 대처법이나, 터치 스타트 이벤트가 호출되었을 경우의 대처법에 대해, 매우 알기 쉬운 코드 스니펫을 제공하고 있습니다.

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}

터치 디바이스인지 아닌지는 화면폭을 사용하지 않도록 합니다.699px보다 훨씬 큰 터치 스크린이 있습니다. Windows 8을 생각해 보십시오.Navigator.userAgent는 잘못된 포스처를 덮어쓸 수 있습니다.

는 이 문제를 Modernizr에서 확인할 것을 추천한다.

장치가 터치 이벤트를 지원하는지 또는 터치 장치인지 테스트하고 싶으십니까?불행하게도, 그건 같은 것이 아니에요.

아니, 가능하지 않아요.주어진 어떤 방법으로든 잘못된 긍정과 잘못된 부정의 결과가 나오기 때문에 주어진 훌륭한 답변은 언제나 부분적일 뿐입니다.OS API에 의해 브라우저에서도 터치스크린이 존재하는지 항상 알 수 있는 것은 아니며, 특히 KVM 타입의 어레인지먼트에서는 브라우저 세션 중에 사실이 변경될 수 있습니다.

상세한 것에 대하여는, 이 뛰어난 기사를 참조해 주세요.

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

이 기사에서는 터치스크린을 검출하고 싶다고 하는 가정을 재검토할 것을 제안하고 있습니다.그것은 아마 틀렸을지도 모릅니다.(앱을 위해 내 자신의 것을 확인했는데, 내 추측은 정말 틀렸습니다!)

이 기사는 다음과 같이 끝납니다.

레이아웃의 경우 모든 사용자가 터치스크린을 가지고 있다고 가정합니다.마우스 사용자는 터치 사용자가 사용할 수 있는 작은 UI 컨트롤보다 큰 UI 컨트롤을 훨씬 쉽게 사용할 수 있습니다.호버 상태에서도 마찬가지입니다.

이벤트 및 상호 작용의 경우, 누구나 터치 스크린을 사용할 수 있다고 가정합니다.키보드, 마우스 및 터치의 상호작용을 동시에 구현하여 서로 차단하지 않도록 합니다.

이러한 작업의 대부분은 jQuery 또는 javascript linters가 필요하지만 구문에 대한 불만이 있습니다.이 문제를 해결하기 위한 "JavaScript"(jQuery도 Modernizr도 아님)를 묻는 첫 번째 질문에 대해 생각해 보면 매번 작동하는 간단한 함수를 소개합니다.또한 가능한 한 최소값입니다.

function isTouchDevice() {
    return !!window.ontouchstart;
}

console.log(isTouchDevice());

마지막으로 이 코드는 프레임워크와 디바이스에 의존하지 않는다는 장점이 있습니다.맛있게 드세요!

Chrome 24는 현재 Windows 8의 터치 이벤트를 지원하는 것으로 보입니다.그래서 여기에 게시된 코드가 더 이상 작동하지 않습니다.브라우저에서 터치가 지원되는지 여부를 감지하는 대신 터치와 클릭 이벤트를 모두 바인딩하고 다음 중 하나만 호출되도록 합니다.

myCustomBind = function(controlName, callback) {

  $(controlName).bind('touchend click', function(e) {
    e.stopPropagation();
    e.preventDefault();

    callback.call();
  });
};

그리고 나서 이렇게 부르죠.

myCustomBind('#mnuRealtime', function () { ... });

이게 도움이 되길 바래!

Firefox for Desktop 이외의 브라우저는 항상 True입니다.Developer용 Firefox for Desktop은 터치 버튼을 클릭하든 클릭하지 않든 상관없이 즉시 사용할 수 있습니다.

다음 버전에서는 Mozilla가 이것을 수정해 주었으면 합니다.

파이어폭스 28 데스크톱을 사용하고 있습니다.

function isTouch()
{
    return !!("ontouchstart" in window) || !!(navigator.msMaxTouchPoints);
}

jQuery v1.11.3

제공된 답변에는 좋은 정보가 많이 있습니다.하지만 최근에는 두 가지 목적을 달성하기 위해 모든 것을 실제로 하나의 솔루션으로 연결하기 위해 많은 시간을 소비했습니다.

  1. 사용중인 디바이스가 터치스크린 타입의 디바이스임을 검출합니다.
  2. 디바이스가 도청된 것을 검출합니다.

투고와 Javascript를 사용한 터치스크린 디바이스 검출 외에 패트릭 로크의 투고는 매우 도움이 되었습니다.https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/

여기 암호가 있습니다...

$(document).ready(function() {
//The page is "ready" and the document can be manipulated.

    if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))
    {
      //If the device is a touch capable device, then...
      $(document).on("touchstart", "a", function() {

        //Do something on tap.

      });
    }
    else
    {
      null;
    }
});

중요!*.on( events [, selector ] [, data ], handler )메서드에는 "터치 스타트" 이벤트 또는 터치와 관련된 기타 유사 이벤트를 처리할 수 있는 선택기(일반적으로 요소)가 있어야 합니다.이 경우 하이퍼링크 요소 "a"입니다.

하이퍼링크 "a" 요소의 실렉터를 사용하여 CSS를 사용하여 이러한 이벤트를 처리할 수 있기 때문에 JavaScript에서 마우스를 정기적으로 클릭할 필요가 없습니다.

/* unvisited link */
a:link 
{

}

/* visited link */
a:visited 
{

}

/* mouse over link */
a:hover 
{

}

/* selected link */
a:active 
{

}

메모: 다른 셀렉터도 있습니다...

문제

터치와 마우스 입력을 조합하여 사용하는 하이브리드 디바이스에서는 사용자가 터치 사용자인지 아닌지를 제어하는 상태/변수를 동적으로 변경할 수 있어야 합니다.

는, 또, 기동합니다.mousemove수돗물로

솔루션

  1. 부하에서 터치가 잘못된 것으로 가정합니다.
  2. touchstart사실
  3. touchstart가 실행된 경우 마우스 이동 핸들러를 추가합니다.
  4. 두 마우스 이동 이벤트 실행 간격이 20ms 미만일 경우 마우스를 입력으로 사용하고 있다고 가정합니다.이벤트가 불필요해지고 마우스 이동은 비용이 많이 들기 때문에 이벤트를 삭제합니다.
  5. touch start가 다시 실행되면(사용자가 touch를 다시 사용하기 시작), 변수는 true로 설정됩니다.그리고 이 과정을 반복하여 역동적으로 결정되도록 합니다.어떤 기적에 의해 마우스를 터치했을 때 2회 빠르게 기동했을 경우(내 테스트에서는 20ms 이내에 기동하는 것은 거의 불가능합니다), 다음 터치스타트는 그것을 true로 되돌립니다.

Safari iOS 및 Android용 Chrome에서 테스트 완료.

주의: MS Surface 등의 포인터 이벤트에서는 100% 확실하지 않습니다.

코드펜 데모


const supportsTouch = 'ontouchstart' in window;
let isUsingTouch = false;

// `touchstart`, `pointerdown`
const touchHandler = () => {
  isUsingTouch = true;
  document.addEventListener('mousemove', mousemoveHandler);
};

// use a simple closure to store previous time as internal state
const mousemoveHandler = (() => {
  let time;
  
  return () => {
    const now = performance.now();

    if (now - time < 20) {
      isUsingTouch = false;
      document.removeEventListener('mousemove', mousemoveHandler);
    }

    time = now;
  }
})();

// add listeners
if (supportsTouch) {
  document.addEventListener('touchstart', touchHandler);
} else if (navigator.maxTouchPoints || navigator.msMaxTouchPoints) {
  document.addEventListener('pointerdown', touchHandler);
}

네, 그래서 터치/비터치 디바이스의 검출에 대해 큰 논의가 있습니다.윈도우 태블릿의 수와 태블릿의 크기가 증가하고 있어 웹 개발자들에게 또 다른 골칫거리가 되고 있습니다.

메뉴에 대한 blmstr의 답변을 사용하고 테스트했습니다.메뉴는 다음과 같이 동작합니다.페이지가 로드되면 스크립트는 터치 디바이스인지 비터치 디바이스인지를 검출합니다.이에 따라 메뉴는 호버(비터치) 또는 클릭/탭(터치)으로 작동합니다.

대부분의 경우 blmstr의 스크립트는 정상적으로 동작하는 것 같았습니다(특히 2018년).다만, 터치로서 검출되는 디바이스나 터치로서 검출되지 않는 디바이스는 있습니다.

이 때문에 저는 이 기사 덕분에 blmstr의 4번째 스크립트의 몇 줄을 다음과 같이 교체했습니다.

function is_touch_device4() {
    if ("ontouchstart" in window)
        return true;

    if (window.DocumentTouch && document instanceof DocumentTouch)
        return true;


    return window.matchMedia( "(pointer: coarse)" ).matches;
}

alert('Is touch device: '+is_touch_device4());
console.log('Is touch device: '+is_touch_device4());

잠금으로 인해 이 장치를 테스트할 수 있는 터치 장치가 한정되어 있지만, 지금까지는 위의 기능이 잘 작동합니다.

데스크탑 터치 디바이스(서피스 태블릿 등)를 가지고 계신 분은 스크립트가 정상적으로 동작하고 있는지 확인해 주시면 감사하겠습니다.

이제 포인터의 지원 측면에서: 거친 미디어 쿼리가 지원되는 것 같습니다.모바일 파이어폭스에 문제가 있었기 때문에 위의 행은 유지했지만 미디어 쿼리 위의 행은 문제가 없습니다.

감사해요.

가장 좋은 방법은 다음과 같습니다.

var isTouchDevice =
    (('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0));
if(!isTouchDevice){
    /* Code for touch device /*
}else{
    /* Code for non touch device */
}
var isTouchScreen = 'createTouch' in document;

또는

var isTouchScreen = 'createTouch' in document || screen.width <= 699 || 
    ua.match(/(iPhone|iPod|iPad)/) || ua.match(/BlackBerry/) || 
    ua.match(/Android/);

좀 더 철저한 점검이 될 것 같습니다

사용방법:

if(jQuery.support.touch){
    alert('Touch enabled');
}

jQuery 모바일 1.0.1에서

모더나이저를 설치하고 간단한 터치 이벤트를 사용할 수 있습니다.이것은 매우 효과적이며 윈도우 서페이스를 포함하여 테스트한 모든 장치에서 작동합니다.

jsFiddle을 만들었습니다.

function isTouchDevice(){
    if(Modernizr.hasEvent('touchstart') || navigator.userAgent.search(/Touch/i) != -1){
         alert("is touch");
            return true;
         }else{
            alert("is not touch");
            return false;
    }
}

또, Javascript로 페이지가 터치 스크린에 표시되는지 아닌지를 검출하는 옵션이 달라, 매우 고생했습니다.현재 IMO는 이 옵션을 올바르게 검출할 수 있는 실제 옵션은 없습니다.브라우저는 (OS가 터치 가능하기 때문에) 데스크톱 컴퓨터에서 터치 이벤트를 보고하거나 일부 솔루션이 모든 모바일 장치에서 작동하지 않습니다.

결국 처음부터 잘못된 접근법이라는 것을 깨달았습니다.터치 디바이스와 비터치 디바이스의 페이지가 비슷해 보인다면 속성을 검출할 필요가 없을지도 모릅니다.제 시나리오는 터치 디바이스의 버튼 위에 있는 툴팁을 비활성화하는 것이었습니다.이 버튼은 더블 탭으로 활성화 할 수 있기 때문입니다.e버튼

저의 해결책은 뷰 팩터를 바꿔서 버튼 위에 툴팁이 필요 없게 하는 것이었습니다.결국, 모두 단점이 있는 방법으로 Javascript에서 터치 디바이스를 검출할 필요가 없었습니다.

실제적인 대답은 다음과 같은 상황을 고려하는 것으로 보입니다.

1) 퍼블릭 사이트(로그인 없음)
두 옵션을 함께 사용하도록 UI를 코드화합니다.

2) 로그인 사이트
로그인 폼에서 마우스 이동이 발생했는지 여부를 캡처하여 숨겨진 입력에 저장합니다.값은 로그인 자격 증명과 함께 전달되어 사용자 세션에 추가되므로 세션 기간 동안 사용할 수 있습니다.

로그인 페이지에만 추가할 jquery:

$('#istouch').val(1); // <-- value will be submitted with login form

if (window.addEventListener) {
    window.addEventListener('mousemove', function mouseMoveListener(){
        // Update hidden input value to false, and stop listening
        $('#istouch').val(0); 
        window.removeEventListener('mousemove', mouseMoveListener);
    });
} 

(+1에서 @Dave Burt로, +1에서 @Martin Lantzch로 답변)

jQuerysupport★★★★★★★★★★★★★★★★★★:

jQuery.support.touch = 'ontouchend' in document;

이제 어디서든 확인할 수 있습니다. 다음과 같습니다.

if( jQuery.support.touch )
   // do touch stuff

언급URL : https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript

반응형