복붙노트

[JQUERY] 자바 스크립트를 사용하여 '터치 스크린'장치를 감지하는 가장 좋은 방법은 무엇입니까?

JQUERY

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

해결법

  1. 1.업데이트 : 프로젝트에 전체 기능 감지 라이브러리를 당겨 전에 아래 blmstr의 답변을 읽어 보시기 바랍니다. 실제 터치 지원을 검출하는 것은 더 복잡하고, 모더 나이저 만 기본적인 사용 사례를 다룹니다.

    업데이트 : 프로젝트에 전체 기능 감지 라이브러리를 당겨 전에 아래 blmstr의 답변을 읽어 보시기 바랍니다. 실제 터치 지원을 검출하는 것은 더 복잡하고, 모더 나이저 만 기본적인 사용 사례를 다룹니다.

    모더 나이저는 사이트에 특징 검출의 모든 종류를 할 수있는 좋은 경량 방법입니다.

    그것은 단순히 각 기능에 대한 html 요소에 클래스를 추가합니다.

    그런 다음 CSS와 JS에서 쉽게 이러한 기능을 타겟팅 할 수 있습니다. 예를 들면 :

    html.touch div {
    width: 480px;
}

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

    그리고 자바 스크립트 (jQuery를 예) :

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

  2. 2.이 기능을 사용하여 시도 적이 있습니까? (이 모더 나이저를 사용하는 데 사용되는 것과 동일하다.)

    이 기능을 사용하여 시도 적이 있습니까? (이 모더 나이저를 사용하는 데 사용되는 것과 동일하다.)

    is_touch_device 함수 () { {시도 document.createEvent ( "TouchEvent"); true를 반환; } 캐치 (전자) { false를 반환; } } CONSOLE.LOG (is_touch_device ());

    UPDATE 1

    document.createEvent ( "TouchEvent")는 최신 크롬 (V. 17)에서 true를 반환하기 시작했다. 모더 나이저는 얼마 전에 이것을 업데이트. 모더 나이저 여기에 테스트하십시오.

    그것이 작동되도록하려면이 같은 함수를 업데이트 :

    is_touch_device1 함수 () { 창에 'ontouchstart'반환; } CONSOLE.LOG (is_touch_device1 ());

    업데이트 2

    나는 위의 IE10에서 작동하지 않는 (MS 표면에 거짓을 반환하는) 것을 발견했다. 여기에 수정은 다음과 같습니다

    is_touch_device2 함수 () { 창에 'ontouchstart'수익 대부분의 브라우저에 // 작품 || 창에 'onmsgesturechange'; // 일부 잘못된 반응과 IE10에서 작동 }; CONSOLE.LOG (is_touch_device2 ());

    UPDATE 3

    창에 'onmsgesturechange는'신뢰할 수 없습니다 이잖아 그래서 일부 IE의 데스크톱 버전에 true를 돌려줍니다. 이보다 확실하게 약간 작동합니다 :

    is_touch_device3 함수 () { (!! 반환 'ontouchstart'창 대부분의 브라우저에 // 작품 || navigator.maxTouchPoints); //는 IE10 / 11 및 표면에서 작동 }; CONSOLE.LOG (is_touch_device3 ());

    UPDATE 2018

    시간이 흐를이를 테스트하기 위해 새롭고 더 나은 방법이 있습니다. 나는 기본적으로 추출하고이를 확인하는 모더 나이저 방법을 단순화했습니다 :

    is_touch_device4 함수 () { 경우 (window.TouchEvent || 창에서 "ontouchstart") true를 반환; 경우 (window.DocumentTouch && DocumentTouch instanceof를 문서) true를 반환; CONST 프리픽스 = "", "-webkit-", "-moz-", "-O-", "-ms-"]; const를 쿼리 = prefixes.map (접두사 =>`($ {접두사} 터치 지원) '); 반환 window.matchMedia (queries.join ( "")) 일치.; } CONSOLE.LOG (is_touch_device4 ());

    여기에 그들은 내가 좀 이상하고 나쁜 관행 생각 비표준 터치 지원 미디어 쿼리 기능을 사용하고 있습니다. 하지만, 이봐, 현실 세계에서 나는 그것이 작동 같아요. (그들은 모두 지원하는) 앞으로 그 미디어 쿼리 기능은 당신에게 동일한 결과를 줄 수 : 포인터와 호버합니다.

    모더 나이저가 그 일을하는 방법의 소스를 확인하십시오.

    터치 감지와 문제를 설명하는 좋은 기사 내용은 다음을 참조하십시오 스투 콕스 : 당신은 터치 스크린을 감지 할 수 없습니다.

  3. 3.모더 나이저가 윈도우 폰에서 IE10을 감지하지 않기 때문에 8 / WinRT, 간단하게는, 크로스 브라우저 솔루션입니다 :

    모더 나이저가 윈도우 폰에서 IE10을 감지하지 않기 때문에 8 / WinRT, 간단하게는, 크로스 브라우저 솔루션입니다 :

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

    당신은 오직 당신이 더 효율적으로 여러 번 사용할 수 있도록, 그래서 그냥 변수에 저장 장치가 갑자기 지원 터치를 지원하거나하지 않습니다으로 한 번 확인해야합니다.

  4. 4.상호 작용 미디어의 도입을 특징으로하기 때문에 간단하게 수행 할 수 있습니다

    상호 작용 미디어의 도입을 특징으로하기 때문에 간단하게 수행 할 수 있습니다

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

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

    (때문에 의견에) 업데이트 : 위의 솔루션은 "거친 포인터"경우 감지하는 것입니다 - 일반적으로 터치 스크린 - 주 입력 장치입니다. 혹시 dectect 할 경우, 예를 들어있는 장치 마우스는 어떤 포인터를 사용할 수있는 터치 스크린이 있습니다 대신 굵은.

    자세한 내용은 여기를 봐 가지고 : 브라우저가 더 마우스가없는 터치 전용임을 감지

  5. 5.내 요구에 작동하고 다음 코드를 조립 한 위의 모든 의견을 사용 :

    내 요구에 작동하고 다음 코드를 조립 한 위의 모든 의견을 사용 :

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

    나는 아이 패드, 안드로이드 (브라우저와 크롬), 블랙 베리 플레이 북, 아이폰 4S, 윈도우 폰 8, IE 10, IE 8, (터치 스크린과 윈도우 8) IE 10, 오페라, 크롬과 파이어 폭스에서이 작업을 테스트했습니다.

    그것은 현재 윈도우 폰 7에 실패하고 난 아직 해당 브라우저에 대한 해결책을 찾을 수 없어.

    희망의 사람이 유용한를 찾습니다.

  6. 6.난이게 좋아:

    난이게 좋아:

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

alert(isTouchDevice());

  7. 7.당신이 모더 나이저를 사용하는 경우는 앞서 언급 한 바와 같이 Modernizr.touch를 사용하기 쉽습니다.

    당신이 모더 나이저를 사용하는 경우는 앞서 언급 한 바와 같이 Modernizr.touch를 사용하기 쉽습니다.

    그러나, 만일의 경우를 대비하여, 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
    }

    당신이 모더 나이저를 사용하지 않는 경우, 당신은 단순히 (document.documentElement에서 'ontouchstart')와 위의 Modernizr.touch 기능을 대체 할 수

    또한 사용자 에이전트를 테스트하는 iemobile 당신에게 윈도우 폰에 비해 감지 마이크로 소프트 모바일 장치의 넓은 범위를 제공 않습니다.

    또한이 SO 질문을 참조

  8. 8.(the've는 터치 이벤트와 추가 포인터 API를 감소하기 때문에, IE 10은 윈도우 바탕 화면, IE 11 일에 터치 이벤트가) 우리는 모더 나이저 구현을 시도했지만 터치 이벤트를 검출하는 더 이상 일치하지 않습니다.

    (the've는 터치 이벤트와 추가 포인터 API를 감소하기 때문에, IE 10은 윈도우 바탕 화면, IE 11 일에 터치 이벤트가) 우리는 모더 나이저 구현을 시도했지만 터치 이벤트를 검출하는 더 이상 일치하지 않습니다.

    우리는 우리가 사용자가 가지고있는 어떤 입력 방식을 모르는만큼 터치 사이트와 웹 사이트를 최적화하기로 결정 그래서. 이것은 다른 어떤 솔루션보다 더 신뢰할 수있다.

    우리의 연구는 클릭하기 전에 우리가 그들을 발견하고 클릭하거나 호버 아무것도 할 수 있습니다 전에 동작을 변경할 수 있도록 대부분의 데스크탑 사용자가 화면을 통해 자신의 마우스를 이동하는 것이 말.

    이것은 우리의 코드의 단순화 된 버전입니다 :

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

  9. 9.작업 바이올린

    작업 바이올린

    나는 이런 식으로 그것을 달성했다;

    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
}

  10. 10.뭔가 더 나은 그들이 터치 스크린이있는 경우, 그들은 그것을 사용하는 경우 확인하는 것입니다 확인보다 더한 것을 확인하기 쉽다.

    뭔가 더 나은 그들이 터치 스크린이있는 경우, 그들은 그것을 사용하는 경우 확인하는 것입니다 확인보다 더한 것을 확인하기 쉽다.

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

  11. 11.이 사람은 심지어 윈도우 표면 태블릿에서 잘 작동!

    이 사람은 심지어 윈도우 표면 태블릿에서 잘 작동!

    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");
}
}

  12. 12.내 fancybox의 iframe을 데스크톱 컴퓨터가 아니라 터치에 표시 할 수 있도록, 터치 여부를 감지하는 이상 나는 코드의 조각을 사용했다. 혼자 blmstr의 코드를 사용할 때 오페라 미니는 안드로이드 4.0 여전히 비 터치 장치로 등록 된 것으로 나타났습니다. (합니까 누구는 이유를 알고?)

    내 fancybox의 iframe을 데스크톱 컴퓨터가 아니라 터치에 표시 할 수 있도록, 터치 여부를 감지하는 이상 나는 코드의 조각을 사용했다. 혼자 blmstr의 코드를 사용할 때 오페라 미니는 안드로이드 4.0 여전히 비 터치 장치로 등록 된 것으로 나타났습니다. (합니까 누구는 이유를 알고?)

    내가 사용하는 결국 :

    <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>

  13. 13.터치를 감지하는 노력의 가장 큰 "잡았다"터치 트랙 패드 / 마우스 모두 지원하는 하이브리드 장치이다. 비록 당신이 경우에있는 거 제대로 당신이 정말로 무엇을해야하는지 사용자의 장치가 지원하는 터치는 사용자가 현재 사용하고 어떤 입력 장치 감지 여부를 감지 할 수. 이 도전과 여기에 가능한 솔루션에 대한 자세한 쓰기까지이있다.

    터치를 감지하는 노력의 가장 큰 "잡았다"터치 트랙 패드 / 마우스 모두 지원하는 하이브리드 장치이다. 비록 당신이 경우에있는 거 제대로 당신이 정말로 무엇을해야하는지 사용자의 장치가 지원하는 터치는 사용자가 현재 사용하고 어떤 입력 장치 감지 여부를 감지 할 수. 이 도전과 여기에 가능한 솔루션에 대한 자세한 쓰기까지이있다.

    사용자는 단지 화면을 터치 나 마우스 / 트랙 패드 대신 두 페이지에 touchstart 및 마우스 오버 이벤트를 등록하는 데 사용 여부를 파악하는 기본적 방법 :

    document.addEventListener('touchstart', functionref, false) // on user tap, "touchstart" fires first
document.addEventListener('mouseover', functionref, false) // followed by mouse event, ie: "mouseover"

    터치 동작은 항상 먼저 대부분의 장치에 전 (touchstart)하지만,이 두 이벤트를 트리거합니다. 이벤트의 예측 가능한 순서에 계산 그래서, 당신은 동적으로 추가하거나 문서에이 순간에 사용자의 현재 입력 유형을 반영하기 위해 문서 루트 캔 터치 클래스를 제거하는 메커니즘을 만들 수 있습니다 :

    ;(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
})();

    더 자세한 사항은 여기에.

  14. 14.사실, 나는이 질문을 연구하고 모든 상황을 고려하십시오. 너무 내 프로젝트에 큰 문제이기 때문이다. 나는 기능 아래에 도달 그래서, 그것은 모든 장치에서 모든 브라우저의 모든 버전에 대한 작동합니다 :

    사실, 나는이 질문을 연구하고 모든 상황을 고려하십시오. 너무 내 프로젝트에 큰 문제이기 때문이다. 나는 기능 아래에 도달 그래서, 그것은 모든 장치에서 모든 브라우저의 모든 버전에 대한 작동합니다 :

    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 그냥 부울 값을 반환합니다.

  15. 15.이 게시물을 확인, 그것은 touchstart 이벤트가 호출 될 경우 수행 할 터치 장치가 감지되면 어떻게 또는 무엇을해야하는지에 대한 정말 좋은 코드를 제공합니다 :

    이 게시물을 확인, 그것은 touchstart 이벤트가 호출 될 경우 수행 할 터치 장치가 감지되면 어떻게 또는 무엇을해야하는지에 대한 정말 좋은 코드를 제공합니다 :

    $(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();
}

  16. 16.나는 장치가 터치 장치인지 확인하기 위해 화면 폭을 사용하지 않는 것입니다. 699px보다 훨씬 더 큰 터치 스크린이 있으며, 거짓 postives를 오버라이드 (override)하는 좋은 수 있습니다 윈도우 8 Navigatior.userAgent 생각합니다.

    나는 장치가 터치 장치인지 확인하기 위해 화면 폭을 사용하지 않는 것입니다. 699px보다 훨씬 더 큰 터치 스크린이 있으며, 거짓 postives를 오버라이드 (override)하는 좋은 수 있습니다 윈도우 8 Navigatior.userAgent 생각합니다.

    나는 모더 나이저에서이 문제를 확인하는 것이 좋습니다.

    장치가 지원하는 이벤트를 터치하거나 터치 장치의 경우에는 시험하고자하고 있습니다. 불행하게도, 그 같은 일이 아니다.

  17. 17.아니, 수 없습니다. 주어진 방법은 잘못된 반응과 거짓 네거티브 필름을 생산하기 때문에 주어진 훌륭한 대답은, 오직 부분이다. 심지어 터치 스크린 인해 OS API에 존재하는 경우, 브라우저는 항상 알고하지 않으며, 사실은 특히 KVM 형 배열로, 브라우저 세션 동안 변경할 수 있습니다.

    아니, 수 없습니다. 주어진 방법은 잘못된 반응과 거짓 네거티브 필름을 생산하기 때문에 주어진 훌륭한 대답은, 오직 부분이다. 심지어 터치 스크린 인해 OS API에 존재하는 경우, 브라우저는 항상 알고하지 않으며, 사실은 특히 KVM 형 배열로, 브라우저 세션 동안 변경할 수 있습니다.

    이 뛰어난 문서의 자세한 내용을 참조하십시오

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

    이 기사는 아마 틀렸다, 당신은 당신이 터치 스크린을 감지 할 수 있도록 가정을 재고 제안합니다. (내 앱 내 자신을 점검하고, 내 가정은 참으로 잘못했다!)

    이 기사는 결론 :

  18. 18.이 작품의 많은하지만 중 하나 jQuery를 요구하거나, 자바 스크립트 린터 구문에 대해 불평하고있다. 초기 질문을 고려하는 것은 "자바 스크립트"(하지 jQuery를하지 모더 나이저)이 해결의 방법을 요청, 여기에 모든 시간을 작동하는 간단한 기능입니다. 당신이 얻을 수 또한 약으로 최소한의입니다.

    이 작품의 많은하지만 중 하나 jQuery를 요구하거나, 자바 스크립트 린터 구문에 대해 불평하고있다. 초기 질문을 고려하는 것은 "자바 스크립트"(하지 jQuery를하지 모더 나이저)이 해결의 방법을 요청, 여기에 모든 시간을 작동하는 간단한 기능입니다. 당신이 얻을 수 또한 약으로 최소한의입니다.

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

console.log(isTouchDevice());

    내가 말할 것이다 마지막 이점은이 코드는 프레임 워크 및 장치 불가지론 것입니다. 즐겨!

  19. 19.

    var isTouchScreen = 'createTouch' in document;

    또는

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

    내가 생각보다 철저한 검사 할 것이다.

  20. 20.이 코드는 여기에 더 이상 작품을 게시 그래서 지금은 아마 윈도우 8에 대한 터치 이벤트를 지원 크롬 (24)처럼 보인다. 대신 터치가 브라우저에서 지원되는 경우 탐지하려고, 나는 지금 모두 터치와 클릭 이벤트를 바인딩하고 있는지 하나가 호출 만들고있어 :

    이 코드는 여기에 더 이상 작품을 게시 그래서 지금은 아마 윈도우 8에 대한 터치 이벤트를 지원 크롬 (24)처럼 보인다. 대신 터치가 브라우저에서 지원되는 경우 탐지하려고, 나는 지금 모두 터치와 클릭 이벤트를 바인딩하고 있는지 하나가 호출 만들고있어 :

    myCustomBind = function(controlName, callback) {

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

    callback.call();
  });
};

    그리고 그것을 호출 :

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

    도움이 되었기를 바랍니다 !

  21. 21.개발자 데스크톱 지원 반응 설계 때문에 파이어 폭스의 항상 TRUE 데스크톱 파이어 폭스를 제외하고 지원하는 모든 브라우저 심지어는 여부 터치 버튼을 클릭!

    개발자 데스크톱 지원 반응 설계 때문에 파이어 폭스의 항상 TRUE 데스크톱 파이어 폭스를 제외하고 지원하는 모든 브라우저 심지어는 여부 터치 버튼을 클릭!

    모질라는 다음 버전에서이 문제를 해결되기를 바랍니다.

    나는 파이어 폭스 28 바탕 화면을 사용하고 있습니다.

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

  22. 22.의 jQuery v1.11.3

    의 jQuery v1.11.3

    제공된 답변에서 좋은 정보가 많이있다. 그러나 최근에 나는 실제로 달성 두 가지에 대한 작업 솔루션으로 모든 것을 함께 묶어하기 위해 많은 시간을 투자했습니다 :

    자바 스크립트와이 게시물 및 감지 터치 스크린 장치 외에, 내가 패트릭 Lauke에 의해이 게시물에 매우 도움이 발견 : 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;
    }
});

    중대한! * 표시 CSTE 연구진 (이벤트 [선택기], 데이터, 핸들러)에있어서 요구가 일반적 요소 선택기를 갖도록, 즉 "touchstart"이벤트 또는 접촉과 연관된 이벤트 등 다른 처리 할 수있다. 이 경우, 하이퍼 링크 요소 "A"이다.

    지금, 당신은 당신이 하이퍼 링크과 같이 "A"요소에 대한 선택기를 사용하여 이러한 이벤트를 처리하기 위해 CSS를 사용할 수 있기 때문에, 자바 스크립트에서 정규 마우스 클릭을 처리 할 필요가 없습니다 :

    /* unvisited link */
a:link 
{

}

/* visited link */
a:visited 
{

}

/* mouse over link */
a:hover 
{

}

/* selected link */
a:active 
{

}

    참고 :뿐만 아니라 다른 선택기가 있습니다 ...

  23. 23.터치와 마우스 입력의 조합을 사용하는 하이브리드 장치로 인해, 동적으로 사용자가 터치 사용자인지 아닌지 코드의 조각을 실행해야할지 여부를 제어 상태 / 변수를 변경 할 수 있어야합니다.

    터치와 마우스 입력의 조합을 사용하는 하이브리드 장치로 인해, 동적으로 사용자가 터치 사용자인지 아닌지 코드의 조각을 실행해야할지 여부를 제어 상태 / 변수를 변경 할 수 있어야합니다.

    탭에도 화재 MouseMove 이벤트를 장치를 누릅니다.

    안드로이드 용 Safari iOS 및 크롬에서 테스트.

    참고 : 100 %를 반드시 MS 표면 등의 포인터 이벤트

    Codepen 데모

    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);
}

  24. 24.나는 사용한다:

    나는 사용한다:

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

    jQuery를 모바일 1.0.1에서

  25. 25.또한 페이지가 터치 스크린 장치에 표시할지 여부를 자바 스크립트에서 감지하는 방법에 대한 다른 옵션을 많이 고투. IMO, 현재로서는, 실제 옵션은 제대로 옵션을 감지 존재하지 않는다. 브라우저 중 하나를 데스크톱 컴퓨터에 보고서 터치 이벤트 (OS가 어쩌면 때문에 터치 준비), 또는 일부 솔루션은 모든 모바일 장치에 대한 작업을하지 않습니다.

    또한 페이지가 터치 스크린 장치에 표시할지 여부를 자바 스크립트에서 감지하는 방법에 대한 다른 옵션을 많이 고투. IMO, 현재로서는, 실제 옵션은 제대로 옵션을 감지 존재하지 않는다. 브라우저 중 하나를 데스크톱 컴퓨터에 보고서 터치 이벤트 (OS가 어쩌면 때문에 터치 준비), 또는 일부 솔루션은 모든 모바일 장치에 대한 작업을하지 않습니다.

    결국, 나는 처음부터 잘못된 접근 방식을 다음과 같은 것을 깨달았다 : 내 페이지가 터치 및 비 터치 기기에 유사했다, 난 아마 전혀 재산을 검출에 대해 걱정할 필요가 없습니다한다 : 그들은 내가 버튼을 활성화하기 위해 하나의 탭을 원 - 탭을 두 배로 이어질로 내 시나리오는 터치 장치의 버튼을 통해 비활성화 도구 설명이었다.

    내 솔루션은 더 툴팁이 버튼에 필요하지 않은 있도록보기를 리팩토링 할 수 있었고, 결국 나는 모두가 자신의 단점을 가지고 방법과 자바 스크립트에서 터치 장치를 검색 할 필요가 없었다.

  26. 26.당신은 모더 나이저를 설치하고 간단한 터치 이벤트를 사용할 수 있습니다. 이것은 매우 효과가 나는 창문 표면을 포함하여 그것을 테스트 한 모든 장치에서 작동합니다!

    당신은 모더 나이저를 설치하고 간단한 터치 이벤트를 사용할 수 있습니다. 이것은 매우 효과가 나는 창문 표면을 포함하여 그것을 테스트 한 모든 장치에서 작동합니다!

    나는 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;
    }
}

  27. 27.실제적인 대답은 문맥을 고려 한 것 같다 :

    실제적인 대답은 문맥을 고려 한 것 같다 :

    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);
    });
}

    (답에 @Martin Lantzsch에 @ 데이브 버트에 +1 +1)

  28. 28.

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

  29. 29.넓이 jQuery를 지원 개체 :

    넓이 jQuery를 지원 개체 :

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

    그리고 지금 당신은 다음과 같이 어디서든 확인할 수 있습니다 :

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

  30. 30.이것은 지금까지 나를 위해 잘 작동하는 것 같습니다 :

    이것은 지금까지 나를 위해 잘 작동하는 것 같습니다 :

    //Checks if a touch screen
is_touch_screen = 'ontouchstart' in document.documentElement;

if (is_touch_screen) {
  // Do something if a touch screen
}
else {
  // Not a touch screen (i.e. desktop)
}

    31. from https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery로 트리거 키 누르기 이벤트에 확실한 방법  (0) 2020.09.25
[JQUERY] 어떻게 자바 스크립트를 사용하여 * .CSV 파일에서 데이터를 읽어?  (0) 2020.09.25
[JQUERY] jQuery로 자바 스크립트 객체에서 선택하는 옵션을 추가하는 가장 좋은 방법은 무엇입니까?  (0) 2020.09.25
[JQUERY] 어떻게 jQuery를 사용하여 "잠시 기다려주십시오로드 중 ..."애니메이션을 만들 수 있습니까?  (0) 2020.09.25
[JQUERY] 사용자가 입력을 멈출 때까지 어떻게 .keyup () 핸들러를 지연?  (0) 2020.09.25
,

티스토리툴바