如何通过event.target区分同一层中的反应konva元素？

Question

早安，

我正在尝试控制mouseleave事件。目标是当<Drawing>元素碰到<Label>时继续其笔划，而当它超出<Stage>时停止该笔划。通过setState（）触发mouseleave事件时，<Drawing>上的mouseLeaveHandler（）停止了笔触。问题在于，当笔划经过<Label>时，也会触发mouseleave事件。

我尝试记录事件对象，并且event.currentTarget属性似乎为我提供了区分<Label> Konva.Image的mouseleave和<Stage> Konva的mouseleave的信息。阶段。但是，由于属性currentTarget是只读的，所以我不能以编程方式使用它。目标属性没有用，因为它将显示为同一类Konva.Image。

我的问题是，如何通过事件对象将konva <Label>与<Stage>区分开？我可以在事件目标中添加其他属性以使其彼此不同吗？

到目前为止我所拥有的：

...
<Stage>
 <Layer>
  <Image />
 </Layer>

 <Layer onMouseMove={(e) => this.onMouseLayerMoveHandler(e)} onMouseEnter={this.onMouseLayerEnterHandler}>
  {/* This is where the Drawing happens */}
  <Drawing
   mode={this.state.isErasing ? 'eraser' : 'brush'}
   brushSize={this.state.brushSize}
   canvasHeight={this.state.canvasHeight}
   canvasWidth={this.state.canvasWidth}
   brushColor={this.state.brushColor}
   hasDrawnHandler={(status) => this.hasDrawnHandler(status)}
   />
   {/* This is where the Label Starts */}
   {this.state.isEditing ? portal : null}
   {this.state.commentsArray.map(comment => {
    let commentValue = comment.value;
    let commentValueArray = commentValue.split(" ");
    let formattedComment = "";

    for (var i = 0; i < commentValueArray.length; i++) {
      if (i > 0) {
       if (i % 10 === 0 && i < commentValueArray.length) {
        formattedComment += '\n';
       }
      }
      formattedComment += " " + (commentValueArray[i] ? commentValueArray[i] : "");
    }

    return (
     <Label
      key={comment.uuid}
      draggable={true}
      x={comment.x}
      y={comment.y}
      width={comment.value.length}
      onDragStart={this.onDragStartHandler}
      onDragEnd={(e) => { this.onDragEndHandler(e, comment) }}
      onMouseEnter={this.onMouseLabelEnterHandler}
      onMouseLeave={this.onMouseLabelLeaveHandler}
     >

    <Tag />
    <Text />

    </Label>
     )
    })}
   </Layer>
</Stage>
...

Drawing.js

mouseLeaveHandler = (e) => {
  console.log(e);
  this.setState({ isDrawing: false });
}

第一个事件是笔触到达<Label>时。第二个是离开<Stage>的时间。如您所见，currentTarget比target属性具有更多有用的信息

感谢您的帮助。谢谢！

Answer 1

您可以使用e.evt.type。当鼠标位于舞台外时，当其击中标签时具有mouseout值，而具有mousemove值。