显示悬停效果但忽略点击事件？答案

【问题标题】：Display hover effect but ignore click event?显示悬停效果但忽略点击事件？
【发布时间】：2021-01-20 08:27:51
【问题描述】：

我有这样的基本结构

.container {
  height: 100vh;
  width: 100%;
  pointer-events: none;
}

.click-layer {
  background-color: #ccc;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
}

.box {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 200px;
  height: 100px;
  background-color: rgba(10, 10, 10, 0.2);
  pointer-events: auto;
}



function App() {
  return (
    <div className="container">
      <canvas
        className="click-layer"
        onClick={() => console.log("Click on Layer 1")}
      >
      </canvas>
      <div className="box" onClick={() => console.log("Click on box")}>
        Box
      </div>
    </div>
  );
}

当用户将鼠标悬停在框上时，我希望有一个悬停效果。例如，背景颜色应更改为“红色”。

但点击事件将被忽略，因为我希望 .click-layer 接收这些事件。

有什么方法可以实现吗？提前致谢！

预期行为

将鼠标悬停在框中 => 背景颜色变为红色
单击框 => 控制台日志“单击第 1 层”

function App() {
  return (
    <div className="container">
      <canvas
        className="click-layer"
        onClick={() => console.log("Click on Layer 1")}
      >
        Layer 1
      </canvas>
      <div className="box" onClick={() => console.log("Click on box")}>
        Box
      </div>
    </div>
  );
}


ReactDOM.render(<App />, document.getElementById("root"));

.container {
  height: 100vh;
  width: 100%;
  pointer-events: none;
}

.click-layer {
  background-color: #ccc;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
}

.box {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 200px;
  height: 100px;
  background-color: rgba(10, 10, 10, 0.2);
  pointer-events: auto;
}

.box:hover {
  background-color: red;
 /* pointer-events: none; */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【问题讨论】：

只有触控设备的点击事件吗？
没有。适用于所有设备
为什么要在盒子上设置 onClick 事件？您可以删除它或帮助我理解您的问题。
@Subro 当然可以去掉，但是如果点击了框，点击层仍然没有得到点击事件
你的问题是如何在点击时不改变BG颜色？

标签： javascript html css reactjs

【解决方案1】：

您可以将 onClick 事件提供给 .click-layer 和 .box，而不是将其提供给整个 .container 类。如果您选择其中任何一个，它会安慰它。我希望这是你所期望的?。

<div className="container" onClick={() => console.log("Click on Container")}>
  <div className="click-layer">Layer 1 </div>
  <div className="box">
    Box
  </div>
</div>

function App() {
  return (
    <div className="container" onClick={() => console.log("Click on Container")}>
      <div className="click-layer">Layer 1 </div>
      <div className="box">
        Box
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

.container {
  height: 100vh;
  width: 100%;
  pointer-events: none;
}

.click-layer {
  background-color: #ccc;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
}

.box {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 200px;
  height: 100px;
  background-color: rgba(10, 10, 10, 0.2);
  pointer-events: auto;
}

.box:hover {
  background-color: red;
  /* pointer-events: none; */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

关于结果，这就是我想要的。但不幸的是，我想接收'.click-layer'而不是父级的点击事件：/
对不起，这很混乱。您想更改框的背景颜色，并且不希望在悬停时出现 onclick 事件。如果是这样，您可以从框中删除 onClick 事件。您还说您还希望在单击时接收.click-layer 的单击事件。为此，您已经正确设置了 JSX。