JQuery - mouse fire event, even if another element is on it

Question

I have a jQuery mouseup event set in a background element that is blue with dashed lines (this is a background image, not elements). It works only if one of the other elements is not laid on top. I could pass the event in code, but that seems to be inviting chaos. Is there a way to get a blue element to receive a mouseup event, even if another element is on top?

In addition, at present, red, blue, and black overlay elements are not children of the blue background element, but they can be if necessary.

Edit :::

Html refactoring to nest elements in parent-child relationships.

Answer 1

(For popular searches ...)

To begin with, the elements of the red, blue, and black overlay elements will be a blue background.

Events are propagated through the DOM hierarchy, passing from the child to the parent until they get into the document - this means that they do not necessarily propagate through the elements, since they are displayed on the screen. If you make red, blue, and black elements children of a blue background, any events on these children will be faded into the background.