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

Question

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

Я знаю, что вы можете использовать pointer-events: none; чтобы ваш щелчок проходил через ваши элементы, но что если я захочу вызвать событие щелчка мышью на элементе И событие щелчка мышью на произвольном количестве других элементов под ним?

Answer 1

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

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

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

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

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

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

});

Answer 2

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

$( 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
}
});