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

Question

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

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

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

JSFiddle

- Abby

---

也许 pointer-events: none; 可以帮助.. 当开始拖动时，只需将被拖动元素的样式更改为此选项，停止拖动时再将其移回。 - Hardy

我将澄清问题 - 没有元素被拖动。 - Abby

好的，我明白了。为什么不在每个正方形中使用onTouchStart事件呢？这样行吗？或者更好的方法是使用画布（canvas）。 - Hardy

onTouchStart仅在触摸开始时触发，不会在每个元素命中时触发。Canvas并不理想，因为它极大地增加了重绘的复杂性以及其他我正在构建的功能。我正在进行这个实验/原型，试图放弃canvas。 - Abby

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。这也可以动态计算。

- Hardy

---

https://jsfiddle.net/abby_io/1au1ee3L/ - 我在包装的 div 上添加了 onTouchMove，但是你可以看到它仍然只显示触摸开始的元素。 - Abby

编辑了答案...所以当然不应该在事件处理网格内添加那些方块，否则它将无法工作。 - Hardy

谢谢。当您说“计算基础正方形的位置”时，是否意味着使用pageX、pageY，然后使用document.elementFromPoint来提取这些元素并在框架之外操作dom？我认为我可以通过使用onTouchMove然后e.touches[0].pageX来实现相同的效果，但理想情况下，我不想自己进行dom操作。 - Abby

如果没有使用 e.touches[0].pageX，我该如何引用/访问手指的位置？还有，我该如何从该元素触发React组件方法？ - Abby

我已经在这个fiddle中使它工作，但不需要使用额外的div，仍然需要使用.pageX。 https://jsfiddle.net/abby_io/hztct4d4/ - Abby

Answer 2

我成功地解决了这个问题，步骤如下：

在包装元素上添加onTouchMove

<div onTouchMove={this.onTouch}>

通过计算子元素位置来处理触摸事件

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

- Abby

---

"<a class='gotoLine' href='#61:11'>61:11</a> Uncaught SyntaxError: Unexpected token '<'" --- Fiddle"<a class='gotoLine' href='#61:11'>61:11</a>未捕获的语法错误：意外的标记'<' "--- Fiddle" - Martin Zvarík