Запуск обработчика onClick, когда он перекрывается с элементом, имеющим обработчики onMouseMove, onMouseEnter и onMouseLeave в React - PullRequest
Новая
       44

Запуск обработчика onClick, когда он перекрывается с элементом, имеющим обработчики onMouseMove, onMouseEnter и onMouseLeave в React

2 голосов
/ 07 февраля 2020

Итак, у меня есть граф SVG, отображаемый в React. Этот график SVG имеет прямоугольный элемент, который перекрывает весь SVG (ширина 100% и высота 100%). Код выглядит следующим образом: 

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

Мне нужен обработчик onMouseMove, поскольку я хочу знать положение мыши (курсора) в любое время, чтобы я мог отображать подсказки и т. Д.

Теперь проблема в том, что я хочу иметь кнопку в правом нижнем углу svg, и я хочу прикрепить обработчик события onClick к этой кнопке. Конечно, у обработчика будет свой собственный лог c.

Код для кнопки следующий: 

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

onClick равен не срабатывает, потому что обработчики событий RectStyled перекрывают все. В реальном DOM элемент rect отображается последним. Элемент button является родным (не дочерним) rect.

Я пытался использовать другие элементы svg, такие как text или path, но получил тот же результат - только onMouseMove

Что я должен сделать, чтобы обеспечить срабатывание onClick?

...