Как вызвать событие щелчка мышью на нескольких элементах HTML, перекрывающих друг друга?

Решением может быть отслеживание движения мыши с помощью:

$( document ).mousemove();

Сохраните координаты в глобальной переменной, а затем проверьте ее положение при щелчке по вашему элементу. Это даст что-то вроде:

var mousePos = [0,0];
$( document ).mousemove(function( event ) {
    mousePos[0] = event.pageX
    mousePos[1] = event.pageY
});
$("#target").click(function(){
// Compare mouse coordinates and your items ones using offset, height and width
if (mousePos[0] > $('#target2').offset.left){
    // Do whatever you are willing to do
}
});

but what if I want to trigger the mouse-click event on an element AND the mouse-click event on arbitrarily many other elements beneath it?

Пузырь событий. Это означает и событие, запущенное на внутреннем элементе, также будет получено родительскими элементами до самого верхнего родительского элемента.

<div id = "topmost">
    <div id = "second">
        <p id = "firstp"></p>
    </div>
</div>

Предположим, вы используете jquery. Ниже показано, как вы будете прослушивать события щелчка из всех элементов ниже div.id = "topmost".

Поскольку нормальный поток событий предназначен для любого события щелчка (может быть событие любого другого типа), которое запускается любым элементом с в самом верхнем элементе div, будет перемещаться к самому внешнему элементу, я перечисляю только самое верхнее событие щелчка, а затем проверяю какой элемент вызвал это событие, проверив идентификатор целевого элемента. e.target будет фактическим элементом, по которому был выполнен щелчок. Вы можете либо переключить target.attr ('id'), либо пропустить его, если условия else.

$(function () {
  $("#topmost").on("click", function (e) {
    e.preventDefault();
    var target = $(e.target);
    if (target.attr('id') === "idOfElement"){
       // code to handle the event
    }else{

});