2

I'm working on something which is more or less a drawing app. I need to support Microsoft Edge and there's the problem. As soon as you want to catch the touchmove or pointermove event, Edge tries to scroll (even if it's not possible). Here's an example. Just try to draw something there (touch/pen), mouse works perfectly even in Edge. In every other browser (except maybe IE) it works very well.

I have no idea why IE is ignoring the preventDefault() function. Has someone an idea?

Sample: https://jsfiddle.net/ryqagkeb/

Actually doesn't work with my Surface Pro & Surface Pen on Chrome and Edge.

canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
start = 0;
canvas.onpointerdown = function(evt) {
    start = 1;
}

canvas.onpointermove = function(evt) {
    if(start) {
        ctx.fillRect(evt.clientX, evt.clientY, 5,5);
    }
}

canvas.onpointerup = function(evt) {
    start = 0;
}
TylerH
  • 20,799
  • 66
  • 75
  • 101
user2531284
  • 184
  • 1
  • 13
  • it might be a propagation thing, have you tried `e.stopPropagation();` ? – silicakes Mar 15 '18 at 12:30
  • Please include an [mcve] inside your question as an [edit]. We need to see your actual code in order to determine what can be wrong in it if anything. A link to a broad tuto is not enough. – Kaiido Mar 15 '18 at 14:06
  • I've added an example. It works when using mouse, but stops working when you use touch or pen input :( – user2531284 Mar 15 '18 at 15:36

1 Answers1

6

So I think I've found the solution myself and posting it now because I think it's pretty helpful. It seems the CSS property "touch-action" can solve the problem.

Setting:

canvas {
    touch-action: none;
}

It seems like it fixes the problem.

user2531284
  • 184
  • 1
  • 13
  • I have tried this approach, using pointermove event on DIV - however yet not working. The scenario is pointerdown creates the DIV (fill up the screen) which holds the pointermove event - however: The pointermove have no reaction - tested on Safari – Xerix Apr 07 '21 at 06:10