Question

Consider this code:

HTML:

<div class='a'>a</div>
<div class='b'>b</div>
<div id='log'></div>

CSS:

.a, .b {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    position: absolute;
    text-align: right;
}
.a {
    left: 100px;
    top: 100px;
}
.b {
    left: 150px;
    top: 150px;
}

JS:

$('*').click(function(e) {
    log(this.nodeName + ' ' + this.className);
});

function log(s) {
    $('#log').append(s + '<br />');
}

If the intersection is clicked, .click() for .a is not called.

Is there any built-in method to force the execution of click() for all elements, and not only the top one and its parents, or I must implement this myself ?

Answer 1

I think that the behavior you are observing is correct. When clicking the topmost element the one beneath won’t get a click event despite it looks it is in the “clicked” area. As a workaround you can manually trigger it’s click event:
$('.a').click().

Calling click without arguments is equivalent to trigger('click') which raises the specified event. You can find more info in the trigger help topic.