HTML5指针移动/触摸移动在Microsoft Edge中不起作用 [英] HTML5 pointermove/touchmove not working in Microsoft Edge

问题描述

我正在研究或多或少是绘图应用程序的东西.我需要支持Microsoft Edge，这是问题所在.一旦您想捕获touchmove或pointermove事件，Edge就会尝试滚动(即使不可能). 这是一个例子.只需尝试在此处绘制一些东西(触摸/笔)，即使在Edge中，鼠标也可以完美工作.在所有其他浏览器(也许不是IE)中，它都可以很好地工作.

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.

我不知道为什么IE忽略了preventDefault()函数.有人有主意吗?

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

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

实际上不适用于我的Surface Pro& amp; Chrome和Edge上的Surface触控笔.

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

推荐答案

所以我想我自己找到了解决方案并立即发布，因为我认为这很有帮助.看来CSS属性触摸动作"可以解决此问题.

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.

设置:

canvas {
    touch-action: none;
}

似乎可以解决问题.

这篇关于HTML5指针移动/触摸移动在Microsoft Edge中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！