在移动网络应用程序上“绘制”html表`td`元素

Question

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

为了用户体验，我想提供“绘画”网格的便利性。 因此，如果用户知道整年存在文档，她可以将手指拖过该行，并且该行中的每个<td>都将应用一个类。

从我从Chrome Dev工具中可以看出，当我将touchmove侦听器附加到每个<td>时，我可以触发很多事件，但事件的目标始终是触摸事件开始的元素，而不是任何其他元素。

当用户将手指拖到桌子上时，有没有办法让每个<td>响应？

Answer 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（意味着左边的第二个单元格，使用从零开始的索引从顶部开始的第四个单元格。

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