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.

Statampere

I don't know them by advance. then how do we know it. – Nyberg

Please share your code. – Disconnected

Maybe a stupid question, but how you can attach events to C elements, if you don't know how to refer them? – Lumberyard

That's the point! If there was no A div, the event would be handled naturally by the C elements :/ – Statampere

CSS z-index, make your B container higher than A – Narco

@Lumberyard jQuery on() delegated events can achieve this easily – Narco

@Narco Yes ofcourse, I just thought OP might find the needed references to C elements from event attaching code... Anyway, jQuery can trigger mouseovers too, then the old "element from coordinate" trick would work? – Lumberyard

@Lumberyard I don't know, I think the design is flawed and would look at fixing that before resorting to "hacks" but they don't want to do that, so... – Narco

Is pointer-events a hack? – Dominations

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;
}

Dominations

Answer 2

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

Surf

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();
                }
            }
        });

Pisolite