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?

![enter image description here](https://i.stack.imgur.com/OYQr7.png)

Answer: 
You can use the CSS [`pointer-events`](https://developer.mozilla.org/en-US/docs/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')
})

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

```