我在 HTML
页面中有两个连续的 div
第一个 div
包含子级 span
,它在 position
中是relative
。这就是它出现在第二个 div 上的原因。
我有一个与两个 div 关联的点击事件。
当我点击第二个 div
上的 span
部分时,它会触发第一个 div 的
点击事件,但我想在这里触发第二个 div 的
点击事件。
有什么办法可以实现吗
function div1Clicked() {
alert('div 1 clicked');
}
function div2Clicked() {
alert('div 2 clicked');
}
#div1 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inline;
float: left;
}
#div1 span {
width: 316px;
height: 30px;
background: green;
float: left;
margin-top: 39px;
position: relative;
}
#div2 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inherit;
float: left;
}
<div onclick="div1Clicked()" id="div1">
<span>
</span>
</div>
<div onclick="div2Clicked()" id="div2">
<div>
</div>
</div>
最佳答案
如果您不需要在子跨度上有任何悬停状态,您可以这样做。请记住,这与您的 html 有点不同,但它可以很容易地转换为您的 html/css,我只是现在没有时间去做。
你所做的是在两个具有更高 z-index
的 div 上添加 :after
,这将覆盖 span
并作为为你的 javascript 触发区域。不要介意我的“奇怪的 css”,它是 BEM。您可以使用您的 javascript 触发器,它会很好地工作。如果您不熟悉所选浏览器中的开发工具,则可以使用 alert()
而不是 console.log()
。
<div class="block">
<div class="block__column block__column--left js-action-1"></div>
<div class="block__column block__column--right js-action-2"></div>
<div class="block__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, voluptas!</div>
</div>
.block {
display: flex;
position: relative;
}
.block__column {
width: 50%;
height: 20rem;
position: relative;
}
.block__column:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.block__column:hover {
cursor: pointer;
}
.block__column--left {
background-color: deepskyblue;
}
.block__column--right {
background-color: deeppink;
}
.block__description {
position: absolute;
top: 50%;
left: 2rem;
right: 2rem;
background-color: white;
}
$('.js-action-1').on('click', function() {
console.log('clicked the left column');
});
$('.js-action-2').on('click', function() {
console.log('clicked the right column');
});
关于javascript - HTML - 来自一个 div 的子元素覆盖另一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46031570/