5

This is for a react "customer signature" component. The touchmove event is not firing on Google Chrome browser for Android. I am on a Samsung Galax Tablet a (2016). I have the tablet connected to my PC via USB for console.

In my componentDidMount I get the canvas reference, 2d context, etc and set the event listener for the canvas element:

componentDidMount(){
   let canvas = this.refs.canvas;
   let ctx = canvas.getContext("2d");
   // ...
   canvas.addEventListener('touchmove ', (e) => { console.log("touchMove: ", e); });
}

In my render I have the canvas: render(){ }

The event never fires. I have set e.preventDefault on touchstart; the page does not scroll when touching inside the canvas area. Touching inside the canvas and moving your finger doesn't do anything.

I have other events that work so I don't think it's anything related to the canvas reference.

document.addEventListener('keydown', this.keyPress);
canvas.addEventListener('mousemove', this.mouseMove); // works
canvas.addEventListener('touchmove ', (e) => { console.log("touchMove E: ", e); }); // does not work
canvas.addEventListener("mousedown", this.mouseDown); // works
canvas.addEventListener("mouseup", this.mouseUp); // works
canvas.addEventListener("touchstart", this.touchStart); // works
canvas.addEventListener("touchend", this.touchEnd); // works

System Details

Chrome 66.0.3359.158
Android 5.1.1;SM-T280 Build/LMY47V

Let me know if you need other information.

I have the mouseMove working well, so this signature module works perfectly on PC. Now I'm just trying to make this work on mobile/touch screen.

PS I've read and read and read about touchmove issues on android and such, but none of these issues seem to address the same issue I am having.

Thanks for your help

John
  • 976
  • 1
  • 15
  • 21

2 Answers2

4

I'm having the same issue, only on one device (Android 7.1.1 with Chrome 75.0.3770 ). The page is a job report, with signature area at the bottom.

The issue is hard to replicate because depending on the layout it doesn't always manifest ( this drove me crazy pulling apart the html of the page thinking I had an unclosed tag somewhere, instead it's just a bit random depending on the layout.), also if I scrolled to the bottom before the page had fully loaded (cache disabled) the touchmove event fired.

After a quick google I found: TouchMove events stopped working in chrome 72 and latest webkit where the workaround was to add a border, that didn't work for me and supports my experience with the issue being dependent on how the page renders.

The fix above from Baked Inhalf does work however you'll have to add { passive: false } if you want to block the event. The strange thing is, that it's not necessary, just adding the event listener to the body fixes the problem.

Here's my fix:

function fixTouchMove( event )
{
    return;
}

// Remove any previous listners as the page content is ajax loaded and body is never destroyed
document.body.removeEventListener( "touchstart", fixTouchMove );
// Event listner that doesn't do anything, but fixes missing eventmove
document.body.addEventListener( "touchstart", fixTouchMove );

p.s add style="touch-action:none;" to the canvas to stop the browser scrolling where you want to sign/draw

antman3351
  • 436
  • 3
  • 8
2

I had the same issue. What finally worked was disabling any scroll if the finger touches the canvas.

document.body.addEventListener("touchstart", function(e){ if (e.target.nodeName == 'CANVAS') { e.preventDefault(); } }, false);
document.body.addEventListener("touchend", function(e){ if (e.target.nodeName == 'CANVAS') { e.preventDefault(); } }, false);
document.body.addEventListener("touchmove", function(e){ if (e.target.nodeName == 'CANVAS') { e.preventDefault(); } }, false);
Baked Inhalf
  • 3,375
  • 1
  • 31
  • 45