简体   繁体   English

HTML5指针移动/ touchmove无法在Microsoft Edge中工作

[英]HTML5 pointermove/touchmove not working in Microsoft Edge

I'm working on something which is more or less a drawing app. 我正在研究一种或多或少是绘图应用程序的东西。 I need to support Microsoft Edge and there's the problem. 我需要支持Microsoft Edge,这就是问题所在。 As soon as you want to catch the touchmove or pointermove event, Edge tries to scroll (even if it's not possible). 一旦你想要捕捉touchmove或pointermove事件,Edge就会尝试滚动(即使它不可能)。 Here's an example . 这是一个例子 Just try to draw something there (touch/pen), mouse works perfectly even in Edge. 只要尝试在那里画一些东西(触摸/笔),鼠标即使在Edge中也能完美地工作。 In every other browser (except maybe IE) it works very well. 在所有其他浏览器(IE可能除外)中,它的效果非常好。

I have no idea why IE is ignoring the preventDefault() function. 我不知道为什么IE忽略了preventDefault()函数。 Has someone an idea? 有人有想法吗?

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

Actually doesn't work with my Surface Pro & Surface Pen on Chrome and Edge. 实际上不适用于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;
}

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. 似乎CSS属性“touch-action”可以解决问题。

Setting: 设置:

canvas {
    touch-action: none;
}

It seems like it fixes the problem. 好像它解决了这个问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM