我有touchMove事件处理程序。
我正在尝试访问事件对象或显示更具体的触摸次数。
<div className={"LeafletMap"} onTouchMove={(e) => this.handleMapMove(e)} onTouchStart={this.handleMapTouch} >
....
然后我在处理程序方法
中访问事件handleMapMove = (e) => {
console.log(e);
...
};
在控制台中,我可以看到
Proxy {dispatchConfig: {…}, _targetInst: FiberNode, isDefaultPrevented: ƒ, isPropagationStopped: ƒ, _dispatchListeners: ƒ, …}
[[Handler]]: Object
[[Target]]: SyntheticTouchEvent
[[IsRevoked]]: false
如何在示例中访问[[Target]] object
,或者更具体一点,我需要通知用户使用两根手指移动地图而不是一根。
答案 0 :(得分:2)
您可以使用触摸事件的touches
属性,它将包含所有可用的触摸点。
像这样:
handleMapMove = (e) => {
console.log(e.touches);
};
根据 MDN DOC :
触摸列表,列出触摸点的所有触摸对象 目前与触摸表面接触,无论是否 不是他们已经改变了,或者他们的目标元素在touchstart上是什么 时间。
此属性为只读。
可以想到能够分开多少个单独的手指 被确定为触摸屏幕。
答案 1 :(得分:1)
你可以像这样访问它:
let target = e.target || e.srcElement;
这将为您提供常规的DOMNode。
您可以在其上调用常规DOMNode函数,因此以下内容将返回目标节点的id:
target.getAttribute('id')
查看文档:{{3}}
获取点击次数可以节省React组件状态中的点击次数并使用该次数。
看看下面的例子:
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
class App extends Component {
constructor(props) {
super(props);
this.state = {
clicks: 0,
show: true
};
}
IncrementItem = () => {
this.setState({ clicks: this.state.clicks + 1 });
}
DecreaseItem = () => {
this.setState({ clicks: this.state.clicks - 1 });
}
ToggleClick = () => {
this.setState({ show: !this.state.show });
}
render() {
return (
<div>
<button onClick={this.IncrementItem}>Click to increment by 1</button>
<button onClick={this.DecreaseItem}>Click to decrease by 1</button>
<button onClick={this.ToggleClick}>
{ this.state.show ? 'Hide number' : 'Show number' }
</button>
{ this.state.show ? <h2>{ this.state.clicks }</h2> : '' }
</div>
);
}
}
我从中获取:target - mozilla
您似乎想要获得显示屏上的手指数量,您不需要目标事件,因为您需要“medium.com”。
要检查两根手指是否已被点击,您可以使用以下代码:
handleMapMove = (e) => {
if(e.touches.length == 2){
console.log("yay, two finger press")
}
};