3

我正在开发一个 Web 应用程序，用户需要查看月份网格并选择是否存在对象列表的文档。

为了用户体验，我想提供“绘制”网格的便利性。因此，假设用户知道文档存在一整年，她只需将手指拖过该行，该行<td>中的每个都会应用一个类。

根据我从 Chrome 开发工具中了解到的情况，当我将touchmove侦听器附加到 each时，我会触发很多事件<td>，但事件的目标始终是触摸事件开始的元素，而不是任何其他元素。

<td>当用户将手指拖到桌子上时，有什么方法可以让每个人都做出响应？

4

1 回答 1

1

不幸的是，事件目标是在事件上设置的，touchstart因此，当您在屏幕上拖动手指时，相同的事件目标将用作每个touchmove事件的起点。

我能想到的唯一解决方法是使用touchmove事件来获取触摸的位置，然后找出与哪个表格单元格重合。如果您的所有表格单元格在给定表格中的尺寸相同，则将从touchmove事件中获得的位置除以表格的宽度和高度将为您提供答案。这里有一个快速的片段让你开始（这个例子假设表格的位置在视口的最左上角）：

var _columnWidth = 40;
var _rowHeight = 20;
var touchListener = function (e) {
    var touch = e.touches[0];
    var x = touch.pageX;
    var y = touch.pageY;
    var xIndex = Math.floor(_someTable.width / x / _columnWidth);
    var yIndex  = Math.floor(_someTable.height / y / _rowHeight);
};

_someTable.addEventListener('touchmove', touchListener, false);

因此，如果表格的宽度为 80，表格的高度为 100，x 和 y 坐标分别为 42 和 67，则 xIndex 将产生 1，yIndex 将产生 3（表示从左侧开始的第二个单元格和使用从零开始的索引从顶部算起的第四个单元格）。

现在这是一个简单的示例，不会神奇地解决您的问题，但它是一个很好的起点。希望这可以帮助！

于 2013-06-10T21:15:21.447 回答