HTML5 指针移动/触摸移动在 Microsoft Edge 中不起作用

Question

我正在开发或多或少是一个绘图应用程序。我需要支持 Microsoft Edge，这就是问题所在。只要您想捕捉 touchmove 或 pointermove 事件，Edge 就会尝试滚动（即使不可能）。 Here's an example。只需尝试在那里画一些东西（触摸/笔），即使在 Edge 中鼠标也能完美工作。在其他所有浏览器中（可能除了 IE）它都运行良好。

我不知道为什么 IE 忽略了 preventDefault() 函数。有人有想法吗？

示例：https://jsfiddle.net/ryqagkeb/

实际上无法在 Chrome 和 Edge 上使用我的 Surface Pro 和 Surface Pen。

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

Answer 1

所以我认为我自己找到了解决方案并现在发布它，因为我认为它非常有帮助。似乎CSS属性“touch-action”可以解决这个问题。

设置：

canvas {
    touch-action: none;
}

好像解决了这个问题。