Microsoft Surface 기기에서 Firefox와의 상호 작용 및 접촉이 가능합니까?

Question

Chrome 및 IE에서 (Surface Pro와 같은) Microsoft 터치 장치에서 마우스/포인터/터치 이벤트를 캡처 할 수 있으며 그 과정에서 페이지를 스크롤하지 못하게합니다.

Firefox에서는 터치로 페이지 스크롤을 멈추는 동안 동일한 레벨의 활동을 얻는 것이 불가능 해 보입니다.

can.addEventListener('wheel', function(e) { 
    console.log('stopping wheel') 
    e.preventDefault(); 
}, false); 

을하지만 파이어 폭스는 동일한 작업을 수행 할 수 있도록, 수신 할 수 마우스/포인터/터치 이벤트를 방출하지 않는 것 : 당신은 "바퀴"를 방지하여 스크롤에서 페이지를 중지 할 수 있습니다. 표면에 터치와

https://codepen.io/simonsarris/pen/PJwMay

:

여기에 라이브 예를 들어 거기 당신은 크롬과 IE의 캔버스에 그릴 수 있습니다,하지만 당신은 파이어 폭스에에 그릴 수 없습니다. "휠"수신기를 주석 처리하면 Firefox가 페이지를 추가로 스크롤합니다.

질문 : 의 HTML 요소 터치 상호 작용 기능을 시스템의 다른 브라우저와 함께 사용하려면 무엇이 필요합니까?

Answer 1

터치 이벤트을 사용해보십시오. 브라우저 간에도 지원됩니다 (Firefox, Chrome, Edge).

해결 방법은 간단합니다. Touch Events을 처리하고 기본값을 방지하십시오.

는이

function startup() { 
    var el = document.getElementsByTagName("canvas")[0]; 
    el.addEventListener("touchstart", handleStart, false); 
    el.addEventListener("touchend", handleEnd, false); 
    el.addEventListener("touchcancel", handleCancel, false); 
    el.addEventListener("touchmove", handleMove, false); 
    log("initialized."); 
} 

element.addEventListener('touchstart', function(e){ 
    var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger) 
    startx = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser 
    statusdiv.innerHTML = 'Status: touchstart<br> ClientX: ' + startx + 'px' 
    e.preventDefault() 
}, false) 

소스 예 - 고려 : 터치 이벤트에 대한

간단한 데모 here(mdn) 또는 here(jsdfiddle)

확인 훨씬 더 완전한 것이 예 (Reference/Demo를) 찾을 수 있습니다 MDN - Touch Events

을 -

<div class="box" id="box1"> 
<h3> Touch Me! </h3> 
</div> 

<h3 id="statusdiv">Status</h3> 

<script> 

window.addEventListener('load', function(){ 

    var box1 = document.getElementById('box1') 
    var statusdiv = document.getElementById('statusdiv') 
    var startx = 0 
    var dist = 0 

    box1.addEventListener('touchstart', function(e){ 
     var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger) 
     startx = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser 
     statusdiv.innerHTML = 'Status: touchstart<br> ClientX: ' + startx + 'px' 
     e.preventDefault() 
    }, false) 

    box1.addEventListener('touchmove', function(e){ 
     var touchobj = e.changedTouches[0] // reference first touch point for this event 
     var dist = parseInt(touchobj.clientX) - startx 
     statusdiv.innerHTML = 'Status: touchmove<br> Horizontal distance traveled: ' + dist + 'px' 
     e.preventDefault() 
    }, false) 

    box1.addEventListener('touchend', function(e){ 
     var touchobj = e.changedTouches[0] // reference first touch point for this event 
     statusdiv.innerHTML = 'Status: touchend<br> Resting x coordinate: ' + touchobj.clientX + 'px' 
     e.preventDefault() 
    }, false) 

}, false) 

</script> 

,451,515,

참고 :

• MDN 터치 이벤트 터치 이벤트 here를 사용 here
• 소개 터치를 here
• 출근 이미지 갤러리 here을 사용하여 이벤트 + 스크롤 + 드래그 here
• 감지 출근을 터치합니다
• 온라인 페인트 demo | code좋습니다!

세부 here에서

터치 이벤트는 도움이되기를 바랍니다.