javascript - "Paint"html 表 `td` 移动网络应用程序上的元素

Question

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

为了用户体验，我想提供“绘制”网格的便利性。所以说如果用户知道整年的文档存在，她只需将手指拖过该行和每个 <td>。该行将应用一个类。

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

有没有办法让每个<td>当用户将手指拖过 table 时做出响应？

Answer 1

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

我能想到的解决此问题的唯一方法是使用 touchmove 事件来获取触摸的位置，然后找出与哪个表格单元格重合的位置。如果给定表格中所有表格单元格的尺寸都相同，则采用从 touchmove 事件获得的位置并将其除以表格的宽度和高度即可得到答案。这是一个快速入门的片段(此示例假定表格的位置位于视口(viewport)的最左上角):

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(表示来自左侧和顶部的第四个单元格使用从零开始的索引)。

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