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')
})