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

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

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

1 个答案: