HTML5 pointermove/touchmove not working in Microso

问题:

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

回答1:

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.