我有一个方格网格。我希望用户能够触摸并在网格上移动,每个方格在触摸经过时都会改变颜色。
我看过 onTouchStart
、onTouchMove
和 onTouchEnd
。使用 onTouchMove
,event.target
总是触摸开始的元素。
如何找到被触摸移动的元素?
我有一个方格网格。我希望用户能够触摸并在网格上移动,每个方格在触摸经过时都会改变颜色。
我看过 onTouchStart
、onTouchMove
和 onTouchEnd
。使用 onTouchMove
,event.target
总是触摸开始的元素。
如何找到被触摸移动的元素?
<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>
div
上添加了 onTouchMove
,但是你可以看到它仍然只显示触摸开始的元素。 - Abbydocument.elementFromPoint
来提取这些元素并在框架之外操作dom?我认为我可以通过使用onTouchMove
然后e.touches[0].pageX
来实现相同的效果,但理想情况下,我不想自己进行dom操作。 - Abbye.touches[0].pageX
,我该如何引用/访问手指的位置?还有,我该如何从该元素触发React组件方法? - Abby.pageX
。 https://jsfiddle.net/abby_io/hztct4d4/ - AbbyonTouchMove
<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
,以便触摸和鼠标移动都以相同的方式处理。
pointer-events: none;
可以帮助.. 当开始拖动时,只需将被拖动元素的样式更改为此选项,停止拖动时再将其移回。 - HardyonTouchStart
事件呢?这样行吗?或者更好的方法是使用画布(canvas)。 - Hardy