HTML - 从一个DIV覆盖其他分区

子元素我有两个连续divs在HTML页HTML - 从一个DIV覆盖其他分区

首先div包含子span这是positionrelative。这就是为什么它来自第二个分区。

我有一个点击事件与两个div关联。

当我点击其中过来第二div的span的一部分，它触发第一div's点击事件，但我想在这里引发第二div's点击事件。

有什么办法可以达到这个目的。

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>

来源

2017-09-04 Rajiv

图片没有多大帮助，告诉我们你的代码。 –

我喜欢图片，但代码很重要 – Max

是否有任何与点击事件相关的跨度？点击跨度是否可以忽略？ –

如果您不需要对孩子跨度任何悬停状态，你可以像下面这样做。请记住，这与你的html有点不同，但它可以很容易地转换为你的html/css，我现在没有时间去做。

你要做的是在两个div上加上:after，这个z-index会覆盖span，并作为你的javascript的触发区域。别介意我的“奇怪的css”，它是BEM。你可以使用你的JavaScript触发器，它会运行良好。如果您不熟悉您选择的浏览器中的devtools，则可以使用alert()而不是console.log()。

DEMO

<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'); 
});

来源

2017-09-04 07:23:08

<html><head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<div onclick="div1Clicked()" id="div1" style=" 
 
    border: 1px solid gainsboro; 
 
    height: 100px; 
 
    width: 13%; 
 
    background: red; 
 
    display: inline; 
 
    float: left; 
 
"> 
 
<span style=" 
 
    width: 316px; 
 
    height: 30px; 
 
    background: green; 
 
    float: left; 
 
    margin-top: 39px; 
 
    position: relative; 
 
"> 
 
</span> 
 
</div> 
 

 
<div onclick="div2Clicked()" id="div2" style=" 
 
    border: 1px solid gainsboro; 
 
    height: 100px; 
 
    width: 13%; 
 
    background: red; 
 
    display: inherit; 
 
    float: left; 
 
"> 
 
<div> 
 
</div></div> 
 
<script> 
 
function div1Clicked(){ 
 
if($("div:first").width() < event.offsetX) 
 
div2Clicked() 
 
else 
 
alert('div 1 clicked'); 
 
} 
 

 
function div2Clicked(){ 
 
alert('div 2 clicked'); 
 
} 
 
</script> 
 
</body></html>

点击span元素，如果触发该事件的父elemnet（DIV1）事件，所以没有得到正确的输出。但你的输出一些检查condition.Please请参考下面网页摘要

function div1Clicked(){ 
if($("div:first").width() < event.offsetX) 
div2Clicked() 
else 
alert('div 1 clicked'); 
}

来源

2017-09-04 07:29:46

由于跨度在于DIV1，它被点击时，才会触发DIV1点击事件，即使是重叠DIV2。所以相反，如果你可以使用绿色跨度的点击事件，它可能会有所帮助。它仍会触发div1点击事件。

<html><head></head> 
    <body> 
    <div onclick="div1Clicked()" id="div1" style=" 
     border: 1px solid gainsboro; 
     height: 100px; 
     width: 13%; 
     background: red; 
     display: inline; 
     float: left; 
    "> 
    <span style=" 
     width: 316px; 
     height: 30px; 
     background: green; 
     float: left; 
     margin-top: 39px; 
     position: relative; 
    " onclick="spanClicked()"> 
    </span> 
    </div> 

    <div onclick="div2Clicked()" id="div2" style=" 
     border: 1px solid gainsboro; 
     height: 100px; 
     width: 13%; 
     background: red; 
     display: inherit; 
     float: left; 
    "> 
    <div> 
    </div></div> 
    <script> 
    function div1Clicked(){ 
    alert('div 1 clicked'); 
    } 

    function spanClicked(){ 
    alert('span clicked'); 
    } 

    function div2Clicked(){ 
    alert('div 2 clicked'); 
    } 
    </script> 
    </body></html>

来源

2017-09-04 07:33:16

如果click-events在span是没有必要的，可以申请pointer-events: none到会完全忽略跨度点击跨度。

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; 
 
    pointer-events: none; /*This will make the span click-through*/ 
 
} 
 

 
#div2 { 
 
    border: 1px solid gainsboro; 
 
    height: 100px; 
 
    width: 13%; 
 
    background: red; 
 
    display: inherit; 
 
    float: left; 
 
}

<body> 
 
    <div onclick="div1Clicked()" id="div1"> 
 
    <span></span> 
 
    </div> 
 
    <div onclick="div2Clicked()" id="div2"> 
 
    <div> 
 
    </div> 
 
    </div>

来源

2017-09-04 07:35:11

你可以像下面的一段：

$('.first,.second').click(function(){ 
 
\t alert($(this).attr('class')) 
 
})

.first{ 
 
    width:200px; 
 
    height:300px; 
 
    background-color:red; 
 
    display:inline-block; 
 
    float:left; 
 
    position:relative; 
 
} 
 
span{ 
 
    position:absolute; 
 
    left: 30%; 
 
top: 30%; 
 
} 
 
.first:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 2; 
 
} 
 
.second:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 99; 
 
} 
 
.second{ 
 
    width:200px; 
 
    height:300px; 
 
    background-color:green; 
 
    display:inline-block; 
 
    position:relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="first"> 
 
     
 
    </div> 
 
    <div class='second'> 
 
    </div> 
 
    <span>Hello World....</span> 
 
</body>

来源

2017-09-04 07:36:57

HTML - 从一个DIV覆盖其他分区

回答

相关问题