javascript - touchmove/MSPointerMove 事件未在 Windows 8 中触发

Question

我只是一个卑微的 uC 程序员，正试图为他的老板组装一个小的网络界面。到目前为止，除了能够使用触摸输入在 Canvas 上选择一个正方形之外，我已经完成了所有工作。

这是在运行 Windows 8 和 IE10 的 Samsung Slate 7 平板电脑上

我已经将代码提炼成几乎最基本的部分:

var cxt;
var c;

window.onload = function () {

c = document.getElementById('displayCanvas');

cxt = c.getContext('2d');


/*
c.addEventListener("MSPointerUp", mouseUp, false);
c.addEventListener("MSPointerMove", mouseMove, false);
c.addEventListener("MSPointerDown", mouseDown, false);
*/
c.addEventListener("touchend", mouseUp, false)
c.addEventListener("touchmove", mouseMove, false);
c.addEventListener("touchstart", mouseDown, false);

}


function mouseDown(downE) {
    window.console &&  console.log("down");
};


function mouseMove(moveE){
    window.console && console.log("move");
}


function mouseUp() {
    window.console && console.log("end");
}

我同时使用 MSPointer 和“正常”javascript 触摸事件获得了开始和结束事件，但是“移动”事件没有注册。

我确定我在这里缺少的东西非常简单，感谢您帮助我!

Answer 1

我假设您正在与 Windows 8 桌面 IE 中的 HTML 页面进行交互。在桌面 IE 中，MSPointerMove 不会在该 Canvas 上触发，因为当用户在屏幕上四处移动手指时的默认行为是平移内容。如果您使用以下代码片段设置 Canvas 样式，则应该会检测到您的 MSPointerMove 事件。

style="-ms-touch-action: none"

这里有一篇很棒的文章，介绍了如何在多种浏览器上使用触摸功能。 http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx