Javascript를 사용한 터치 스크린 장치

Javascript를 사용한 터치 스크린 장치

Javascript/jQuery에서 클라이언트 장치에 마우스가 있는지 탐지하려면 어떻게 해야 합니까?

사용자가 마우스를 항목 위에 올리면 작은 정보 패널을 위로 슬라이드하는 사이트가 있습니다.저는 jQuery를 사용합니다.hover 호버를 감지하려는 의도이지만 iPhone/iPad/Android와 같은 터치 스크린 장치에서는 이 기능이 작동하지 않습니다.이러한 장치에서 탭으로 돌아가 정보 패널을 표시합니다.

var isTouchDevice = 'ontouchstart' in document.documentElement;

참고: 장치가 터치 이벤트를 지원한다고 해서 반드시 터치 스크린 장치만 지원하는 것은 아닙니다.많은 장치(예: My Asus Zenbook)는 실제 터치 입력 메커니즘이 없는 경우에도 클릭 및 터치 이벤트를 모두 지원합니다.터치 지원을 위해 설계할 때는 항상 클릭 이벤트 지원을 포함해야 하며, 어떤 장치도 하나 또는 다른 장치로만 구성되어 있다고 가정해서는 안 됩니다.

창 테스트 중입니다.Touch는 Android에서 작동하지 않았지만 다음과 같은 기능을 합니다.

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

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

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

다음을 참조하십시오. http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

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

어디서나 작동합니다!!

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

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

Microsoft는 Internet Explorer 11부터 Microsoft 공급업체에서 이 속성의 접두사 버전(msMaxTouchPoint)을 제거할 수 있으며 대신 maxTouchPoints를 사용할 것을 권장합니다.

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

사용자:

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

jQuery 모바일 1.0.1에서

Google Chrome은 이에 대해 잘못된 긍정을 반환하는 것 같습니다.

var isTouch = 'ontouchstart' in document.documentElement;

터치 이벤트를 에뮬레이트하는 기능(F12 -> 오른쪽 하단의 설정 -> "오버라이드" 탭 -> 마지막 확인란)과 관련이 있다고 생각합니다.기본적으로 꺼져 있는 것은 알지만 결과의 변화를 (Chrome에서 작동하는 "in" 방식과 연결합니다.)하지만, 제가 테스트한 바로는 이것이 효과가 있는 것 같습니다.

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

내가 그 코드를 실행한 모든 브라우저는 그 유형이 "객체"이지만 정의되지 않았다는 것을 아는 것이 더 확실합니다 :-)

IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome for iPad 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";
}

첫 번째 게시물/댓글:클릭하기 전에 '터치 스타트'가 트리거된다는 것은 누구나 알고 있습니다.또한 사용자가 페이지를 열 때 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.touch와 상부의 기능을 하는.('ontouchstart' in document.documentElement)

는 사용자 에이전트 테스트를 하십시오.iemobile에서는 탐지된 탐모범보제광다공니보다 더 넓습니다.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");
  }

그런 다음 터치 기반 이벤트(예: 터치 시작) 또는 마우스 기반 이벤트(예: 마우스 다운)에 선택적으로 바인딩할 수 있습니다.나는 아직 안드로이드를 테스트해본 적이 없습니다.

언급URL : https://stackoverflow.com/questions/3974827/detecting-touch-screen-devices-with-javascript