Tương tác và liên lạc với Firefox trên các thiết bị Microsoft Surface?

Question

Trên các thiết bị cảm ứng của Microsoft (chẳng hạn như Surface Pro), trên Chrome và IE, bạn có thể chụp các sự kiện chuột/con trỏ/chạm và trong quá trình này, ngăn cuộn trang.

Trên Firefox, nhận được cùng một mức độ hoạt động trong khi ngăn trang di chuyển với liên lạc dường như là không thể. Bạn có thể ngừng trang từ di chuyển bằng cách ngăn chặn "bánh xe":

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

Nhưng Firefox dường như không phát ra chuột/con trỏ/chạm vào sự kiện mà bạn có thể lắng nghe, vì vậy bạn không thể làm những hành động tương tự.

Có một ví dụ sống ở đây:

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

Với cảm ứng trên một bề mặt: Bạn có thể vẽ trên vải trong Chrome và IE, nhưng bạn không thể vẽ trên nó trong Firefox. Nếu bạn nhận xét người nghe "bánh xe", Firefox sẽ bổ sung cuộn trang.

Vì vậy, câu hỏi là: Điều gì là cần thiết để có được HTML Element tương tác cảm ứng trong Firefox, tương đương với các trình duyệt khác trên hệ thống?

Answer 1

Cân nhắc sử dụng Chạm vào Sự kiện. Và được hỗ trợ trên các trình duyệt (Firefox, Chrome, Edge).

Giải pháp rất đơn giản, xử lý Touch Events và ngăn chặn các giá trị mặc định.

Xem xét việc này example-

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) 

Nguồn: MDN - Touch Events

bản demo đơn giản cho Touch Sự kiện có thể được tìm thấy here(mdn) hoặc here(jsdfiddle)

Kiểm tra ví dụ này đó sẽ là nhiều hoàn chỉnh hơn (Reference/Demo) -

<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> 

Tài liệu tham khảo:

• MDN cảm ứng Sự kiện here
• Sử dụng Sự kiện cảm ứng here
• Giới thiệu về Chạm sự kiện + Scroll + Kéo here
• Phát hiện Swipe sử dụng cảm ứng here
• Swipe Hình ảnh bộ sưu tập here
• Sơn trực tuyến demo | codeĐiều này thật tuyệt!
• sự kiện cảm ứng một cách chi tiết here

Hy vọng nó giúp.