HTML - 1つのdivオーバーライド他のdiv

から子要素は、私がHTMLページHTML - 1つのdivオーバーライド他のdiv

まずdivに二つの連続divsを持っているがpositionでrelativeある子span含まれています。だからこそ、それは2番目の部門になる。

私は両方の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に簡単に変換できることを覚えておいてください。私はこの時点でそれを行う時間がありません。

z-indexという2つのdivに:afterを追加すると、spanの上に重なり、javascriptのトリガー領域として機能します。私の "奇妙な探しているcss"気にしないでくださいそれはBEMです。あなたはJavaScriptのトリガを使用することができ、うまくいくでしょう。お使いのブラウザのdevtoolsに精通していない場合はconsole.log()の代わりにalert()を使用できます。

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>

イベント親elemnet（DIV1）イベントをトリガした場合ので、正しい出力を得ることはありません、span要素をクリックします。しかし、あなたはスパンが、DIV1にあり、それがクリックされますと、それがDIV2に重なっている場合でも、唯一のDIV1クリックイベントを発生されるように、いくつかのチェックcondition.Pleaseは、以下を参照して、出力が

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

出典

2017-09-04 07:29:46

スニペット得ます。したがって、緑色のスパンのクリックイベントで使用できる場合は、役立つ可能性があります。それでもdiv1のクリックイベントは発生します。 span上click-eventsが必要でない場合は

<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

、あなたは完全にスパンのクリックを無視しますスパンに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 - 1つのdivオーバーライド他のdiv

答えて

関連する問題