Как обнаружить onMouseOver на базовом элементе в React, используя его границы - PullRequest
Новая
       40

Как обнаружить onMouseOver на базовом элементе в React, используя его границы

0 голосов
/ 27 июня 2019

Не удается обнаружить событие onMouseOver для элемента под <canvas />, который обнаруживает onMouseMove.

У меня есть <canvas />, в котором есть симуляция частиц, которая зависит от события onMouseMove. У меня также есть <div />, который лежит под <canvas />. Мне нужно обнаружить его onMouseOver в его границах. В настоящее время я передал onMouseOver из оболочки <div />, которая обертывает <canvas /> и <div />, но в результате handleMouseOver() для <div /> запускается всякий раз, когда мышь находится над оболочкой.

Структура 

<Wrapper>
  <canvas width="100%" height="100%" z-index="2" />
  <div width="20px" height="20px" z-index="1" />
</Wrapper>

Живой пример: https://codesandbox.io/s/underneath-event-demo-4uzm0

Моя задача - поймать onMouseOver для <div />, который находится под <canvas />, который перехватывает все события и должен также перехватывать событие onMouseMove. pointer-events: none - это не решение, потому что мне также нужен мой <canvas />, чтобы ловить события Изменение z-index приводит к тому, что один из элементов не был доступен для перехвата события.

1 Ответ

0 голосов
/ 27 июня 2019

Вы можете сделать это

handleCanvasMouseMove 

const handleCanvasMouseMove = e => {
    console.log("Canvas move event");
    console.log("Canvas value X", e.clientX);
    console.log("Canvas value Y", e.clientY);
  };

так: 

<Canvas onMouseMove={e => handleCanvasMouseMove(e)} />
...