有一个Node组件,我需要Node在被点击时打印 "Clicked"。
<Node key={props.id} {...props} onClick={()=>console.log('Clicked')}>
{props.label}
</Node>
我需要Node在被点击时打印 "Clicked",但是,我想防止Node在我从Node点击并拖动到任何地方时打印 "Clicked"。现在它仍然在打印 "Clicked"。- 我使用了stopPropogation()和preventDefault(),但没有任何效果。
我在onWindowsMouseUp方法中进行了处理;全局级别;Display.js;Display类使用了Node。
componentDidMount() {
...
window.addEventListener('mousemove', this.onWindowMouseMove);
window.addEventListener('mouseup', this.onWindowMouseUp, true);
}
...
onWindowMouseUp(e) {
if (this.mouseInProgress) {
e.stopPropagation();
e.preventDefault();
}
this.mousePoint = null;
this.mouseInProgress = false;
}
MouseInProgress
onWindowMouseMove(e: PointerEvent) {
if (!this.mouseInProgress) {
const distance = geometry.getDistance((this.mousePoint: any), mousePoint);
if (distance < GraphVisualization.MINIMUM_PAN_DISTANCE) {
return;
}
this.mouseInProgress = true;
}
...
在这个例子中,我把事件监听器连接到节点上,基本上只有当鼠标点击并释放节点时,它才会打印 "Clicked"。基本上,它只会在鼠标点击和释放节点时打印 "Clicked",而不会在中间移动。
现在你只需要给mouseMove添加最小距离逻辑,应该就可以了。
<Node onmouseup="handleMouseUp" onmousedown="handleMouseDown" ></Node>
window.addEventListener('mousemove', mouseMove);
function handleMouseUp() {
if(this.mouseMoved) console.log("clicked")
this.mouseMoved = false
this.mouseDown = false
}
function mouseDown() {
this.mouseDown = true
}
function mouseMove(){
if(this.mouseDown)this.mouseMoved = true
}