获取触摸事件路径中的元素

Question

我有一个正方形网格。我希望用户能够触摸并在网格上移动，并且每个方块在触摸经过时都会改变颜色。

我查看了 onTouchStart、onTouchMove 和 onTouchEnd。使用 onTouchMove，event.target 始终是触摸开始的元素。

如何找到通过触摸移动的元素？

JSFiddle

Answer 1

尝试添加覆盖所有方块的另一个元素（方块顶部）并处理该元素中的触摸事件。然后只需计算下垫方块的位置即可。使用 Z-index 将该事件处理网格放在顶部。

赞：

<div style={{position: 'relative'}}>
  <div onTouchMove={this.log} style={{position: 'absolute', zIndex: 1000}}>
  </div>
  <div className="square" />
  <div className="square" />
  <div className="square" />
  <div className="square" />
  ...
</div>

因此，如果您有 20px X 20px 的 10x10 正方形，那么顶部 div 应该是 200px X 200px。这也可以动态计算。

Answer 2

我设法解决了这个问题，如下所示；

在包装元素上添加了 onTouchMove

<div onTouchMove={this.onTouch}>

通过计算子位置来处理该 touchMove 事件

onTouch: function(e) {
  const coords={
    x: parseInt(e.touches[0].pageX/boxSize, 10),
    y: parseInt(e.touches[0].pageY/boxSize, 10)
  }
  this.handleChildChange(coords.x, coords.y);
}

这将计算盒子的坐标并触发颜色变化

handleChildChange: function(x, y) {
  this.props.grid[y][x].c=1;
  this.forceUpdate()
}

鼠标操作框onMouseEnter

onMouseEnter={this.props.handleChange.bind(this, this.props.box.x, this.props.box.y)}

在每个方框项目上，我保留 onMouseEnter 以便以相同的方式处理触摸和鼠标移动

JSFiddle