onMouseOver() event triggered multiple times

I add the mouseover handler to Stage, but found the handler called multiple times even when the mouse pointer is only moving inside the canvas. It’s not like the example: https://konvajs.org/docs/events/Image_Events.html . Any clue?

onMouseOver(e) {
    if (e.target.attrs.x === undefined) {
      return;
    }

    let p = this.getPointFromEvent(e);
    console.log(p.x);
    // alert(p.x);

    if (p.x < 0 || p.x > gridX - 1 || p.y < 0 || p.y > gridY - 1) {
      return;
    }

    this.setState({
      hoverPiece: {x: p.x, y: p.y}
    });
  }

render() {
    return (
      <div>
        <Col span={8}>
          <Stage width={500} height={300} onClick={this.onClick.bind(this)} onMouseOver={this.onMouseOver.bind(this)} onMouseOut={this.onMouseOut.bind(this)}>
            <Layer>
              {
                this.renderGrid()
              }
              {/*<Text text="Some text on canvas" fontSize={15} />*/}
              {/*<Rect*/}
              {/*  x={20}*/}
              {/*  y={50}*/}
              {/*  width={100}*/}
              {/*  height={100}*/}
              {/*  stroke={"black"}*/}
              {/*  strokeWidth={4}*/}
              {/*  // fill="red"*/}
              {/*  // shadowBlur={10}*/}
              {/*/>*/}

              {
                this.renderPieces()
              }
              {/*<LionImage />*/}

              <Line
                points={this.getPoints()}
                stroke="black"
                strokeWidth={10}
              />
              {
                this.renderHighlight()
              }
            </Layer>
          </Stage>
        </Col>
      
      </div>

    );
  }

[lavrton]

You can set listening={false} to background rectangle. So it doesn’t affect hit regions and events.

[lavrton]

This is how mouseover event works. I think you want mouseenter instead.