touchmove 事件是否支持多点触控？答案

【问题标题】：Does the touchmove event support multi-touch?touchmove 事件是否支持多点触控？
【发布时间】：2015-06-18 04:58:29
【问题描述】：

我在屏幕上有两个方块。每个都有一个 touchmove 事件。当我在手机上运行它时，我希望它返回我手指的正确 X 位置。如果我一次只做一个正方形（即只有一根手指在屏幕上），它工作得很好。但是，如果我在每个方格上都有两个手指并且我同时移动它们，那么 X 就会变得混乱。这是处理多点触控 x 的正确方法吗？

html:

<div id='container1'></div>
<div id='container2'></div>

javascript：

$('#container1').bind('touchmove', function() {        
            console.log("container1-" + event.pageX);
            event.preventDefault();
    });


$('#container2').bind('touchmove', function() {
        console.log("container2-" + event.pageX);
       event.preventDefault();
    });

css:

#container1 {
    margin:50px;
    width:300px;
    height:300px;
    background:red;
}

#container2 {
    margin:50px;
    width:300px;
    height:300px;
    background:green;
}

我的 jsfiddle 在这里： http://jsfiddle.net/foreyez/jghzqL9p/

如果您按下“运行”按钮旁边的移动图标，您可以在移动设备中运行它。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

当你处理触摸事件时，你应该使用事件对象的'changedTouches'属性。它是所有当前触摸的列表，带有标识符（识别的触摸 - 您的手指）、pageX、pageY 等参数。

要全面了解多点触控处理，我建议您阅读this MDN article。

【讨论】：

【解决方案2】：

是的。正如 Maxim 所建议的，您应该使用 changedTouches 来读取多次触摸。 “changedTouches”中的点对于touchstart、touchend和touchmove事件有不同的含义。

如果您尝试交换或移动对象，那么您应该使用 'touchstart' 和 'touchmove' 的组合来到达对象的最终位置。

【讨论】：