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

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>

所以如果你喜欢10x10正方形和20px X 20px那么顶部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