gpt4 book ai didi

javascript - 将点击传递到固定元素

转载 作者:太空宇宙 更新时间:2023-11-04 13:19:54 25 4
gpt4 key购买 nike

我有一个位于固定元素之上的静态元素。单击上部静态元素时,我想将此单击传递给固定元素。我怎样才能做到这一点?这是一个工作示例(我无法让它在 JSFiddle 中工作)。

<body>
<div class="lower" onclick="lowerClick()"></div>
<div class="upper" onclick="upperClick()"></div>
</body>

<script>
function lowerClick() {
alert("LOWER CLICK");
};
function upperClick() {
alert("UPPER CLICK");
};
</script>


//CSS file
.lower {
height: 100px;
width: 100%;
z-index: -1;
position: fixed;
background-color:blue;
}
.upper {
height: 50px;
width: 100%;
z-index: 1;
position: static;
background-color:red;
pointer-events: none;
}

我认为将 pointer-events:none 添加到我的上层元素可以使它起作用,但是当我单击顶部元素时,没有任何反应。

最佳答案

事实上 pointer-events:none 可以正常工作。但是阻止您单击 lower 的是 body 元素。由于在 lower 上设置了 z-index:-1,它将被发送到其父级(即 body)的后面。所以你可以将bodyz-index设置为一个更负的数,当然postion应该是以外的一些值>静态(默认):

body {
z-index:-1000;
position:relative;
}

Demo

关于javascript - 将点击传递到固定元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24153182/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com