Javascript로 터치 스크린 장치 감지

Javascript / jQuery에서 클라이언트 장치에 마우스가 있는지 어떻게 알 수 있습니까?

사용자가 항목 위로 마우스를 가져 가면 정보 패널이 약간 위로 미끄러지는 사이트가 있습니다. jQuery.hoverIntent를 사용하여 호버를 감지하고 있지만 iPhone / iPad / Android와 같은 터치 스크린 장치에서는 작동하지 않습니다. 따라서 해당 장치에서 정보 패널을 표시하기 위해을 탭하여 되돌리고 싶습니다.

수행하기위한 하나 hover와 click둘. 또 다른 방법은 CSS 미디어 쿼리를 사용하고 터치 / 탭 기능이있을 가능성이 큰 작은 화면 / 휴대 기기에만 일부 스타일을 사용하는 것입니다. 따라서 CSS를 통해 특정 스타일이 있고 jQuery에서 모바일 장치 스타일 속성에 대한 해당 요소를 확인하면 모바일 특정 코드를 작성하기 위해 해당 요소에 연결할 수 있습니다.

여기를 참조하십시오 : http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

var isTouchDevice = 'ontouchstart' in document.documentElement;

참고 : 장치가 터치 이벤트를 지원한다고해서 반드시 터치 스크린 장치라는 의미는 아닙니다. 내 Asus Zenbook과 같은 많은 장치는 실제 터치 입력 메커니즘이없는 경우에도 클릭 및 터치 이벤트를 모두 지원합니다. 터치 지원을 설계 할 때는 항상 클릭 이벤트 지원을 포함하고 어떤 장치가 하나만 있다고 가정하지 마십시오.

window.Touch에 대한 테스트를 찾았습니다 .Android에서는 작동하지 않지만 다음과 같이 작동합니다.

function is_touch_device() {
  return !!('ontouchstart' in window);
}

문서를 참조하십시오 자바 스크립트를 사용하여 '터치 스크린'장치를 감지 할 수있는 가장 좋은 방법은 무엇입니까?

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

msMaxTouchPoints와 함께 maxTouchPoints를 사용하는 이유 :

Microsoft는 Internet Explorer 11부터이 속성의 Microsoft 공급 업체 접두사 버전 (msMaxTouchPoints)을 제거 할 수 있으며 대신 maxTouchPoints를 사용하는 것이 좋습니다.

출처 : http://ctrlq.org/code/19616-detect-touch-screen-javascript

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

모든 곳에서 작동합니다!

나는 사용한다:

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

jQuery Mobile 1.0.1에서

Chrome은 다음에 대해 오 탐지를 반환하는 것 같습니다.

var isTouch = 'ontouchstart' in document.documentElement;

"터치 이벤트 에뮬레이션"(F12-> 오른쪽 하단 모서리의 설정-> "재정의"탭-> 마지막 확인란)과 관련이 있다고 생각합니다. 기본적으로 사용 중지되어 있음을 알고 있지만 이것이 결과 변경 사항 (Chrome에서 작동하는 데 사용 된 'in'방법)과 연결되는 것입니다. 그러나 이것은 테스트 한 한 작동하는 것 같습니다.

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

typeof 가 "object"인 상태에서 해당 코드를 실행 한 모든 브라우저 는 그것이 정의되지 않은 것임을 알고 더 확실합니다 :-)

IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, iPad 용 Chrome 21.0.1180.80 및 iPad Safari에서 테스트되었습니다. 누군가가 더 많은 테스트를하고 결과를 공유하면 멋질 것입니다.

내 사이트 중 하나에 대해 이것을 작성했으며 아마도 가장 완벽한 솔루션 일 것입니다. 특히 Modernizr조차도 터치 감지에 대해 오 탐지를 얻을 수 있기 때문에.

jQuery를 사용하는 경우

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

아니면 그냥 순수한 JS ...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

첫 번째 게시물 / 코멘트 : 클릭하기 전에 'touchstart'가 시작된다는 것을 모두 알고 있습니다. 또한 사용자가 페이지를 열면 1) 마우스를 움직입니다. 2) 클릭 3) 화면을 터치합니다 (스크롤을 위해 또는 ... :)).

뭔가 해보자 :

//-> 시작 : jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

// <-끝 : jQuery

좋은 하루 보내세요!

토론에서 위에서 언급 한 다음 코드를 테스트했습니다.

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

아이폰에서 안드로이드 모질라, 크롬, 오페라, 안드로이드 기본 브라우저 및 사파리에서 작동 ... 모든 긍정적 인 ...

나를 위해 단단한 것 :)

터치 이벤트를 감지하기 위해 Modernizr 소스에서 링크 된 주제에 대한 유용한 블로그 게시물입니다. 결론 : Javascript에서 터치 스크린 장치를 안정적으로 감지 할 수 없습니다.

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

이것은 나를 위해 작동합니다 :

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

Modernizr 을 사용하면 사용 하기가 매우 쉽습니다.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
    }

Modernizr을 사용하지 않으면 간단히 Modernizr.touch 위 함수를('ontouchstart' in document.documentElement)

또한 사용자 에이전트를 테스트하면 iemobile탐지 된 Microsoft 모바일 장치보다 더 넓은 범위의 감지 된 Microsoft 모바일 장치가 제공됩니다.Windows Phone .

또한이 SO 질문을 참조하십시오

jQuery Mobile에서 간단하게 다음을 수행 할 수 있습니다.

$.support.touch

이것이 왜 문서화되지 않은지 모릅니다. 그러나 크로스 브라우저 안전합니다 (현재 브라우저의 최신 2 개 버전).

이미 언급했듯이 장치는 마우스와 터치 입력을 모두 지원할 수 있습니다. 종종 "지원되는 내용"이 아니라 "현재 사용중인 내용"이라는 질문이 있습니다.

이 경우 마우스 이벤트 (호버 리스너 포함)와 터치 이벤트를 간단히 등록 할 수 있습니다.

element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...

JavaScript는 사용자 입력에 따라 올바른 리스너를 자동으로 호출해야합니다. 터치 이벤트의 경우onTouchStartCallback 호버 코드를 에뮬레이트하여 시작됩니다.

터치는 두 종류의 청취자, 터치 및 마우스를 모두 발사 할 수 있습니다. 그러나 터치 리스너가 먼저 진행되고을 호출하여 후속 마우스 리스너가 실행되는 것을 막을 수 있습니다 event.preventDefault().

function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}

자세한 내용은 여기를 참조하십시오 .

iPad 개발을 위해 다음을 사용하고 있습니다.

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

그런 다음 터치 기반 이벤트 (예 : ontouchstart) 또는 마우스 기반 이벤트 (예 : onmousedown)에 선택적으로 바인딩 할 수 있습니다. 아직 안드로이드에서 테스트하지 않았습니다.