Question

Let us have this code:

<div id="outer_container">
  <div id="inner_child_1"></div>
  <div id="inner_child_2"></div>
</div>

div#outer_container
{
  position: relative;
  width: 200px;
  height: 200px;
  background-color: green;
}

div#inner_child_1
{
  position: absolute;
  z-index: 1
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
}

div#inner_child_2
{
  position: absolute;
  z-index: 2
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: blue;
}

When we make a click, for example, on the top layer inner_child_2, the event will propagate to all event handlers registered to inner_child_2 and its parent outer_container. Not to inner_child_1 despite it is directly below inner_child_2. This is by specification. All modern browsers do it.

My question is this:

How to make an event pass through inner_child_2 and reach inner_child_1, besides making inner_child_1 not visible or change its z-index?
(Or transparent, but this will only work in IE8)

I thought about triggering an event myself in some handler code registered to inner_child_2. But in the real usage case, I don’t know where to dispatch the event, as below inner_child_2, there are multiple elements laid out in unpredictable fashion and I want each one to receive events as if inner_child_2 was not there. Ideally, I want to be able to selectively let some events pass while keeping others out.

I know this is a difficult question, but I will appreciate any suggestions

Answer 1

One way would be to take a bottom-up approach:

In the parent container, you would handle the click event, then iterate through its children and compare the click’s coordinates with the relative bounds of each child. If the click is within the bounds, a click should have been triggered there, so manually trigger a click event on that child.