Interactivity and touch with Firefox on Microsoft Surface devices?

Question

On Microsoft touch devices (such as the Surface Pro), on Chrome and IE it is possible to capture mouse/pointer/touch events, and in the process, prevent scrolling the page.

On Firefox, getting the same level of activity while stopping the page from scrolling with the touch seems impossible. You can stop the page from scrolling by preventing "wheel":

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

But Firefox does not seem to emit mouse/pointer/touch events that you can listen for, so you cannot do the same actions.

There's a live example here:

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

With touch on a Surface: You can draw on the canvas in Chrome and IE, but you cannot draw on it in Firefox. If you comment out the "wheel" listener, Firefox will additionally scroll the page.

So the question is: What is needed to get HTML Element touch interactivity in Firefox, on parity with the other browsers on the system?

Answer 1

Consider using Touch Events. And its supported across browsers(Firefox, Chrome, Edge).

Solution is simple, Handle the Touch Events and prevent defaults.

Consider this 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)

Source : MDN - Touch Events

Simple demo for Touch Events can be found here(mdn) or here(jsdfiddle)

Check this example which would be much more complete(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>

References:

• MDN Touch Events here
• Using Touch Events here
• Introduction to Touch events + Scroll + Drag here
• Detecting Swipe using touch here
• Swipe Image gallery here
• Online Paint demo | code This is good!
• Touch events in detail here

Hope it helps.