마우스 및 터치에 대한 브라우저 기능 및 선택 이벤트 감지

Question

잠시 동안 터치 이벤트를 사용하기 시작했지만 상당히 문제가 발생했습니다. 지금까지는 터치 기능이 지원되는지 확인하고이를 기반으로 선택적 이벤트를 적용했습니다. 예 :

if(document.ontouchmove === undefined){ 
    //apply mouse events 
}else{ 
    //apply touch events 
} 

그러나 내 컴퓨터의 Chrome5 (현재 베타)에서 스크립트가 작동하지 않습니다. 이전에 Chrome, Firefox, IE 등이 아닌 Chrome5에서 document.ontouchmove은 더 이상 undefined이 아니라 null이 아니며 조금 연구했습니다.

처음에 버그 보고서를 제출하고 싶었지만 마우스와 터치 기능을 모두 갖춘 장치가 있기 때문에 자연스러운 현상 일 수 있습니다. 내 OS에서 두 가지 유형의 이벤트 .

그래서 솔루션은 쉽게 보입니다. 두 가지 이벤트 유형 모두를 적용하십시오. 권리?

이제 모바일에서 문제가 발생합니다. 이전 버전과의 호환성을 유지하고 마우스 이벤트 만 사용하는 스크립트를 지원하기 위해 모바일 브라우저는 터치 (터치) 할 수도 있습니다. 그런 다음 마우스 및 터치 이벤트가 설정된 상태에서 매번 특정 핸들러가 두 번 호출 될 수 있습니다.

어떻게 접근하나요? 선택적 이벤트를 확인하고 적용하는 더 좋은 방법이 있습니까? 아니면 브라우저가 터치 및 마우스 이벤트를 동시에 발생시키는 경우 발생할 수있는 문제를 무시해야합니까?

Answer 1

더미 요소를 생성하고 터치 이벤트 처리기를 연결 한 다음 처리기 유형이 "function"인지 확인하십시오. 일부 브라우저는 비 터치 장치에서 실행 중이지만 터치 이벤트 처리기를 허용 할 것이기 때문에 이것은 완벽하지 않습니다.하지만 아마도 당신이 얻는 것만 큼 가까이있을 것입니다. 그래서 다음과 같은 것 :

var hasTouch = function() { 
    var dummy = document.createElement("div"); 
    dummy.setAttribute("ontouchmove", "return;"); 
    return typeof dummy.ontouchmove == "function" ? true : false; 
} 

해피 코딩!

Answer 2

터치 이벤트가 발생하면 마우스 이벤트를 사용 중지 하시겠습니까?

예컨대 :

 
function touch_events() { 
document.onmousemove = null; 
... 
} 

function mouse_events() { ... } 

document.ontouchmove = touch_events; 
document.onmousemove = mouse_events; 

Answer 3

이 너무 분명하다?

if(document.ontouchmove !== undefined || document.ontouchmove == null){ 
    //apply touch events 
}else{ 
    //apply mouse events 
} 

Answer 4

var support_touch = (터치 유형 == "개체");

이 나를 위해 잘 작동 - 올라의 대답에 유사

Answer 5

, 나는 항상이 이벤트가 정의하지 않는 단순한이 작품을 감지하지만 나는 또한 (산불 등) 특정 기발한 안드로이드 장치에서 그것을 찾을 발견했습니다

//detect capabilities 
this.is_touch_device = ('ontouchstart' in document.documentElement) || (navigator.userAgent.match(/ipad|iphone|android/i) != null); 

//if so do somemthing 
if (this.is_touch_device) { 
    //like publishing a custom event 
} 

(아마이 일을 더 좋은 방법이

Answer 6

당신이 요청하지 않은 질문에 대답 지금까지 여기에 모든 것들을 나는이 오해나요, 나했다 :)? 적어도 이제는 지원되는 이벤트를 확인할 수있는 여러 가지 대체 방법이 있습니다.

어쨌든 귀하의 질문과 관련하여 : 나는 건물에 따라 다르다고합니다. 나는 당신이 "적용된 선택적인 이벤트"를 쓰면 이벤트 리스너와 핸 들러를 추가하는 것을 의미한다고 생각하십니까? 또한 멀티 터치를 다루지 않는다고 가정합니다 (아직)?

일반적으로 앱이 두 입력 이벤트 유형 모두에서 작동하도록하려면 선택 항목 만 남기고 모든 항목에 리스너를 등록합니다. touchstart 및 mousedown에 대한 동일한 처리기를 이미 사용하고있을 수 있습니다. 따라서 후속 동일한 이벤트 중 하나만 실제로 처리되도록 할 수 있습니다 (CPU 사이클을 저장하고 다시 그려서 부작용을 피하는 데 도움이됩니다).

터치 장치에 관해서는 단 한번의 터치로 말하면 내 레벨 10 (2.3.3) 전화가 마우스 이벤트, 즉 "클래식"웹 (모두 onmousedown -events 등) 이벤트를 생성하는 것을 볼 수 있습니다. ..)는 터치 이벤트를 작동합니다 ... 음, 분명히 터치 장치이기 때문입니다. 그러나 자바 스크립트 API가 TouchEvents를 지원하는지 확인하는 것만으로는 입력 장치에 대해 아무 것도 말하지 않습니다. 예 : 쿠분투 데스크톱의 rekonq 브라우저는 위의 예제에서 true를 반환하지만 터치 스크린과 함께 사용하지 않는 한 절대 실행하지 않습니다.

window.navigator.userAgent를 통해 장치를 구분하는 것이 더 현실적인 방법일까요?