需要点击绝对元素并触发2个点击事件：1个为绝对元素，另一个为它后面的元素

Question

我可以为这两个元素触发click 事件吗？

• position: relative容器
  • 元素 1： 常规 div
  • 元素 2： position: absolute div

IRL 元素 2 是一个透明背景，用于监听标题顶部的点击以隐藏导航抽屉。但是如果用户点击 Header 标志，我想隐藏导航抽屉，但我也想导航到主页。

有可能吗？有什么办法可以解决这个问题？

function App() {
  
  function handleClick1() {
    console.log('From handleClick 1 behind div...');
  }
  
  function handleClick2() {
    console.log('From handleClick 2 absolute div...');
  }
  
  return(
    <div className="container">
      <div className="normal" onClick={handleClick1}>
        Only the absolute DIV click is fired.
      </div>
      <div className="absoluteDiv" onClick={handleClick2}>
      </div>
    </div>
  );
}

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

div.container {
  position: relative;
  width: 150px;
  height: 150px;
}

div.normal {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

div.absoluteDiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(55,55,55,0.3);
  cursor: pointer;
}

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

Answer 1

我不确定这是你在尝试的，还是类似的。

function App() {
  
  const handleClick1 = ()  => {
    console.log('From handleClick 1 behind div...');
  }
  
  const handleClick2 = () => {
    handleClick1();
    console.log('From handleClick 2 absolute div...');
  }
  
  return(
    <div className="container">
      <div className="normal" onClick={handleClick1}>
        Only the absolute DIV click is fired.
      </div>
      <div className="absoluteDiv" onClick={handleClick2}>
      </div>
    </div>
  );
}

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

div.container {
  position: relative;
  width: 150px;
  height: 150px;
}

div.normal {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

div.absoluteDiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(55,55,55,0.3);
  cursor: pointer;
}

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