A div is blocking mouse events

Question

I have some problems with mouse events in a rich html application.

I have a big fat 'semi-transparent' div covering the half of the screen (damn designers). Let's call him A.

Behind this A div, there is a big container called B.

Inside B, there are 4 divs that should respond to mouseover and mouseout events. We can call them C1, C2, C3 and C4.

Unfortunately, the big fat A div blocks all my Javascript/jQuery events.

This could be solvable with some workarounds, but here's the thing:

• This bug appears inside a homemade Javascript engine. I know B but I'm not supposed to know the C elements (or their ids) standing inside B. So I can't use neither coordinates trick nor if/else workarounds.
• The application should run on a TV (inside a weird version of opera). So no 'pointer-events' CSS trick.
• Please don't tell me to redesign my app:)

I tried to handle (with and without jQuery) the event from A and trigger it to B. It works but then B doesn't forward it to its C children, and once more, I don't know them by advance.

Answer 1

Here is what you do. Most browsers support css pointer events .

On those browsers use:

#big-blocking-div {
  pointer-events: none;
}

For browsers that don't support this css feature do this

#big-blocking-div {
  display : none;
}

Answer 2

OR inside tag: style="pointer-events: none;"

Answer 3

Since you have div1 which contains some HTML content that should listen to clicks and div2 that is overlapping it, you need to find the coordinates of the click and then click on the correct position based on that, via:

        $(yourdiv).click(function(e) {
            // element that has been clicked.
            var elm = $(this);
  
            // getting the respective
            let x = e.pageX;
  
            // coordinates of location.
            let y = e.pageY;

            let elementsToClick = document.elementsFromPoint(x, y);
            for (let element of elementsToClick) {
                //Implement the function below
                if ((this !== element) && shouldBeClicked(element)) {
                    element.click();
                }
            }
        });