How to click through objects

Question

Let's just say I have four boxes aligned into a big square, and then another one on top, which has an alpha of .5(so you're able to phisically see all five boxes).

When I click my first small box, I get alert you clicked on box 1, and so with box 2, 3, and 4.

But remember that you have another big box.

Here is the example:

$(function() {
  $("#box_a").click(function() {
    alert("you clicked box_a")
  });
  $("#box_b").click(function() {
    alert("you clicked box_b")
  });
  $("#box_c").click(function() {
    alert("you clicked box_c")
  });
  $("#box_d").click(function() {
    alert("you clicked box_d")
  });
  $("#box_e").click(function() {
    alert("you clicked box_e(this shouldn't happen!)")
  });
});

#box_a, #box_b, #box_c, #box_d {
 height: 100px;
 width: 100px;
 position: relative;
}

#box_a {
 top:0px;
 left:0px;
 background-color: red;
}

#box_b {
 top:-100px;
 left:100px;
 background-color: blue;
}

#box_c {
 top:-100px;
 left:0px;
 background-color: yellow;
}

#box_d {
 top:-200px;
 left:100px;
 background-color: green;
}

#box_e {
 width:200px;
 height:200px;
 top:-400px;
 left:0px;
 background-color: black;
 opacity: .5;
 position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="box_a"></div>
<div id="box_b"></div>
<div id="box_c"></div>
<div id="box_d"></div>
<div id="box_e"></div>
</body>

This should give you an idea. How do I make it so that even though #box_e is on the front, you can click through it.

What's preventing you from clicking "through" it ? the only reason an event fires is because you assign it with an event — elad.chen, Oct 02 '15 at 00:41
@elad.chen: This is not correct. The click event fires because a user clicks their mouse. It is captured by `#box_e`, then propagates to parents. The click event is never generated for the other boxes unless `#box_e` declines to capture it (by using `pointer-events` CSS). — Amadan, Oct 02 '15 at 00:43
@elad.chen: Yes, and the OP is asking how to pass the event through *on this particular CSS layout*. It is a valid question, which has perfectly good applications in the real world, even if the example looks stupid (most minimal examples do in isolation). — Amadan, Oct 02 '15 at 00:46
@nevermind: If it wasn't possible, I would not have linked the duplicate question. :) This is fixed by a single line of CSS: `#box_e { pointer-events: none }`. — Amadan, Oct 02 '15 at 00:47

How to click through objects

0 Answers0

Linked