Как я могу получить 3 div-оверлея, чтобы позволить переход по клику, который запускает все базовые обработчики событий div?

У меня есть 3 div наложенные так:

<div id="div1" style="height: 500px; width: 500px; position:absolute; z-index: 1"></div>
<div id="div2" style="height: 500px; width: 500px; position:absolute; z-index: 2"></div>
<div id="div3" style="height: 500px; width: 500px; position:absolute; z-index: 3"></div>

Все они имеют обработчики событий on.click, которые выдают разные сообщения

Возможно ли, что при нажатии на один, независимо от того, какой из них находится сверху, он позволяет всем нижележащим элементам div с переходом по клику (пробовал "события указателя: нет", но это отключает все функции) запускать их соответствующие обработчики событий? Скажем, что я нажимаю на div 3, а div 2 и 3 также запускают их обработчики событий. Кроме того, я не хочу жестко закодированных решений, таких как:

$('#div3').on('click',function() {
   // trigger div 1 and 2 events manually
})

Проблема с событиями указателя: ни один из них не состоит в том, что тот, у кого он есть, не будет запускать его обработчик событий, как я хочу, каким-либо образом это исправить?

Источник

2 ответа

Решение

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

$('#div3').click(function(e) {
$(this).hide();
var elements = [];
var element;
var count = 0;
element = $(document.elementFromPoint(e.clientX,e.clientY));
while (element.prop("tagName") != "HTML" && count < 15) {
    elements.push(element);
    $(element).hide();
    element = $(document.elementFromPoint(e.clientX,e.clientY));
    count++;
}
$(elements).each(function() {
    $(this).trigger("click");
    $(this).show();
});
$(this).show();
});

Скрипка: http://jsfiddle.net/13jLrarp/3/

count чтобы убедиться, что он не застрянет в бесконечном цикле (на всякий случай), хотя это технически не требуется

В скрипке нажатие на зеленое поле заставит красное поле расти горизонтально, а нажатие на синее поле заставит красное поле расти вертикально. Щелчок там, где они перекрываются, заставляет красное поле расти в обоих направлениях. Обратите внимание, что при использовании z-index красное поле помещается поверх двух других

Источник 




    $( "#other" ).click(function() {
      $( "#target" ).click();
    });

                                        
                                    
                                

                                

                                    

                                        

                                            
                                        

                                        
                                    

                                    

                                        

                                            
                                                Источник
Другие вопросы по тегам