我可以为这两个元素触发 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"/>
最佳答案
我不确定这是您要尝试的还是类似的。
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"/>
关于javascript - 需要点击绝对元素,触发2次点击事件 : 1 for the absolute element and other for the element behind it,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59358873/