Is it possible to click div1 and div2 simultaneously, while div2 is overlaying?

Question

I'd like to know if it's possible to have both divs be clicked at the same time, even though one is behind the other..

If I click the red div, then the green is activated too. I made an example here: https://jsfiddle.net/ow67aaz1/1/

<div class="full">
  <div class="box">
    <div class="one"></div>  
    <div class="two"></div>
  </div>
</div>

$(".one").click(function() {
    alert('green Clicked');
});

<style>
.full { background: #ddd; width:300px; height: 300px; margin: 0 auto;}

.box {position: relative;}
.one {background: green; width: 50px; height: 50px; position: absolute;}
.two {background: red; width: 30px; height: 30px; position: absolute;}

<style>

I tried the following but but can't figure out how to make it trigger..

$('.two').click(function()
{
    $('.one').trigger('click');

});

Answer 1

you just need to trigger the click event of second div

 $(".one").click(function() { alert('green Clicked'); $(".two").trigger("click"); }); $(".two").click(function() { alert('red Clicked'); }); 

 .full { background: #ddd; width:300px; height: 300px; margin: 0 auto;} .box {position: relative;} .one {background: green; width: 50px; height: 50px; position: absolute;z-index:1} .two {background: red; width: 50px; height: 50px; position: absolute; z-index:0} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="full"> <div class="box"> <div class="one"></div> <div class="two"></div> </div> </div> 

Update

Run the snippet again, the red div is no visible but its been clicking .

Thanks

Answer 2

I would use the same click handler for both element and if needed test the target or currentTarget depending on the requirements:

 $(".one, .two").click(function(e) { if ($(e.target).is('.one')) { // do stuff related to one console.log('click on one'); } else if ($(e.target).is('.two')) { // do stuff related to two console.log('click on two'); } // do stuff related to both console.log('common code'); }); 

 .full { background: #ddd; width:300px; height: 300px; margin: 0 auto;} .box {position: relative;} .one {background: green; width: 50px; height: 50px; position: absolute;} .two {background: red; width: 30px; height: 30px; position: absolute;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="full"> <div class="box"> <div class="one"></div> <div class="two"></div> </div> </div> 

Answer 3

Try this

$(".one").click(function() {
    alert('green Clicked');
});

$(".two").click(function() {
    alert('red Clicked');
    $(".one").trigger("click");
});

Answer 4

You can simply trigger the click event of the div which is below, when the click event of the div which is above is fired. For instance, lets say div with class "one" is above.

$(".one").click(function() {
  console.log('Green div is clicked');
  $(".two").trigger("click");
});
$(".two").click(function() {
  console.log('Red div is clicked');
});

Answer 5

You can use jquery's $(this) to achieve same. Code can be further reduce to.. $(".one,.two").click(function() { var x = $(this).prop('class'); alert('class '+x+ ' div is clicked' ); });