时间戳

首页 > 解决方案 > 如何使用其边界检测 React 中底层元素的 onMouseOver

reactjs - 如何使用其边界检测 React 中底层元素的 onMouseOver

问题描述

无法在检测到的onMouseOvera 下面的元素上<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

我的任务是捕获位于捕获所有事件并且也需要捕获事件的下方的onMouseOverfor the 。不是解决方案，因为我也需要我来捕捉事件。更改导致其中一个元素不可用于事件捕获。<div /><canvas />onMouseMovepointer-events: none<canvas />z-index

标签： reactjsmouseeventevent-bubbling

解决方案

你可以这样做

手柄画布鼠标移动

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)} />

推荐阅读