2013-02-15 3 views
4

터치 스크린을 사용하는 자바 스크립트 웹 응용 프로그램이 있으며 브라우저는 웹킷 기반입니다.터치 스크린 및 Javascript DOM 마우스 위치 이벤트

나는이 문제가 오전 : 마우스를 사용하는 경우

addEventListener("mousedown", function(event){ 
    console.log('down fired'); 
    event.target.classList.add('down'); 
}, true); 

을 대상 요소 클래스는 마우스를 누르고하지만 터치 스크린을 사용하는 경우, 대상 요소 클래스하지 않은 경우에 즉시 추가 손가락을 요소에 붙이면 바뀌었다.

그러나 이상한 일은 마우스 클릭과 ts 누름 모두에 대해 콘솔 로그 메시지가 다운 이벤트로 전송됩니다.

이 문제를 해결하는 방법에 대한 제안 사항 ??

감사

편집

나는 touchstart 이벤트 리스너를 추가하지만, 터치 이벤트가 발생하지 않습니다

: 일반적으로 터치 장치는 마우스 이벤트를 보낼 않지만

addEventListener("touchstart", function(event){ 
    cl('touch fired'); 
}, true); 

답변

1

예상대로 , 터치 스크린을위한 특별한 이벤트가 있습니다. 구체적으로 'mousedown'에 해당하는 'touchstart'와 'mouseup'에 해당하는 'touchend'/ 'touchcancel'입니다. 건드린 버튼이나 위치를 확인하지 않은 경우 일반적으로 직접 바꿀 수 있습니다.

그런데 touchend는 사용자가 화면을 터치하지 않는 것을 의미합니다. touchcancel은 터치를 가로 채는 (브라우저가 아닌 경고와 같은) 일이 발생할 때 발생합니다.

+0

감사합니다. 터치 이벤트를 추가했지만 터치로 실행되지는 않지만 이벤트가 인식되지 않는 것이 아니라 콘솔이 이벤트를 기록 할 때 인식되지만 다른 모든 조치는 실행되지 않는 것으로 나타납니다. ! – crankshaft

+0

console.log가 작동하지만 내 처리기가 아닌 경우 모바일 장치에 문제가 있는지 궁금해합니다. 그러나보고하지 않습니다. 당신이 뭔가를 간단하게, 경고 ('테스트');로 당신의 행동을 대체한다면,이 통과합니까? –

+1

안녕하세요, 고마워요, 이건 모바일 장치가 아니에요, 그것은 아치 리눅스와 미도리 웹 브라우저를 운영하는 임베디드 리눅스입니다. 터치 스크린 하드웨어는 마이크로 칩 mtouch이며, 드라이버가 없으며 O/S가 HID 마우스로 인식합니다. 터치 이벤트가 인식되지 않는 이유입니다. mosuedown 이벤트에서 벗어날 수 있습니까? – crankshaft

3

대신에 touchstart 및 touchend 이벤트를 사용하십시오. 당신이 1 개 이상의 손가락을 사용할 수 있기 때문에

event.target는, 터치 스크린 작동하지 않습니다, 그래서 더 표적이 있습니다 :

addEventListener("touchstart", function(event){ 
    console.log('down fired'); 
    event.target.classList.add('down'); 
}, true); 
9

너무 늦게,하지만 어쩌면 다른 사람이 그것을 사용할 수

addEventListener("mousedown", function(event){ 
    console.log('down fired'); 
    var t = /touch/.test(event.type) ? event.targetTouches[0] : event.target; 
    t.classList.add('down'); 
}, true); 
관련 문제