Trigger onClick handler, when it's overlapped with element that has onMouseMove, onMouseEnter and onMouseLeave handlers in React

Question

So, I have an svg graph rendered in React. This SVG graph has a rect element that overlaps the whole svg (width 100% and height 100%). The code looks like this:

<RectStyled
    ref={rectRef}
    width={dimensions.width}
    height={dimensions.height}
    onMouseOver={toggleHover}
    onMouseLeave={toggleHover}
    onMouseMove={handleMove}
/>

I need the onMouseMove handler, since I want to know the mouse (cursor) position at any time, so I can display tooltips and so on.

Now the problem is that I want to have a button at the bottom right corner of the svg, and I want to attach an onClick event handler to that button. The handler will, of course, have some logic of it's own.

The code for the button is as follows:

<button
    onClick={e => {
            console.log('is it triggered');
            // other logic, not relevant for the issue
    }}
>
    Analyse
</button>

onClick is not being triggered, because event handlers of RectStyled are overlapping everything. In the actual DOM, the rect element is rendered last. The button element is a sibling (not a child) of rect.

I tried using other svg elements, like text or path, but got the same result — only onMouseMove is triggered.

What do I have to do to ensure onClick gets triggered?

Trigger onClick handler, when it's overlapped with element that has onMouseMove, onMouseEnter and onMouseLeave handlers in React

0 Answers0