jQuery - Trigger click even on element behind

Question

My issue is that i have this box aka container. Inside that container there are boxes that the user can click.

To visually help the user I made overlay boxes with a gray faded out color that tells them they can use the boxes here.

But my issue is that the click event is on the boxes behind the overlay box.

So is there any way of ignoring a element's .click() and use next target?

Answer 1

You can use the CSS pointer-events property:

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.

#element {
  pointer-events: none;
}

Or you can trigger the click event:

$('#box').click(function(){
   $('#target').trigger('click')
})

Answer 2

Avoiding CSS pointer-events ...

Firstly, make sure the contained boxes all have the class name box (or similar).

Secondly, make boxes inactive with .addClass('inactive'), (with corresponding CSS directives in the stylesheet to look after the background color and border). To re-activate boxes, simply .removeClass('inactive').

Thirdly, delegate the handling of clicks on boxes to the container as follows:

$('#container').on('click', '.box', function() {
    //common behaviour (pre)
    if($(this).hasClass("inactive")) {
        //inactive box behaviour
    }
    else {
        //active box behaviour
    }
    //common behaviour (post)
});