防止鼠标单击由另一个 HTML 元素分层的 HTML 元素

Question

我正在使用 p5.js 库来实现一些视觉效果，以及 reactJS。

我实现了什么：当我在屏幕上单击并拖动鼠标时，背景（比如 canvas）会改变颜色。这是使用 p5.js

实现的

我想要的：我创建了一个可拖动的 HTML 元素。但是，当我单击并拖动我的新元素时，canvas 也会响应单击并更改颜色。我希望我的点击只影响新的分层元素，而不是 canvas.

我尝试将新元素设置为较高的 z-Index，并将 canvas 容器设置为较低的 z-Index。但是，这不起作用。如有任何帮助，我们将不胜感激！

Answer 1

在没有查看您的代码的情况下，我的最佳猜测是您必须停止事件的传播。所以在你的 dragStart 活动中，你可以这样做：

onDragStart={ e => {
  e.stopPropagation();
  // your code
 }

来自mdn docs：

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases

Preventing a mouse click on an HTML element layered by another HTML element