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?
1 Answers
Answers 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.
0 comments:
Post a Comment