Element pozycjonowania bezwzględnego jquery kliknij

Question

Mam problem z bezwzględnym kliknięciem elementu div. Zajmuję się tworzeniem strony internetowej z jquery scrollpath i dodałem dodatkowe warstwy, aby uzyskać efekt paralaksy, a górna warstwa pokrywa guziki w głównej warstwie i nie można ich kliknąć, unosić, itd.

Here jest prosta examlple:

<div class="body"> 
<div class="a"></div> 
<div class="b"> 
    <div class="element first">First</div> 
    <div class="element second">Second</div> 
</div> 
</div> 

.body { 
    position relative; 
} 
.a { 
    position: absolute; 
    left: 20px; 
    top: 20px; 
    width: 300px; 
    height: 600px; 
    background: rgba(0,0,0,0.5); 
    z-index: 2; 
} 
.b { 
    position: absolute; 
    left: 40px; 
    top: 40px; 
    width: 260px; 
    height: 300px; 
    background: blue; 
    z-index: 1; 
} 
.b .element { 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    background: red; 
} 
.b .element.first { 
    top: 50px; 
    left: 50px; 
} 
.b .element.second { 
    bottom: 50px; 
    right: 50px; 
} 
} 

muszę zachować tę strukturę HTML i zdolność do kliknięcia div w absolutnej umieszczonej div z niższą z-index. Czy to możliwe?

Answer 1

Można ustawić pointer-events na none na górnym elemencie, aby zatrzymać reagowanie na zdarzenia myszy.

pointer-events:none; 

JSFIDDLE http://jsfiddle.net/ugGgN/5/

Krzyż wsparcie przeglądarka jest bardzo dobry w tych dniach: http://caniuse.com/#feat=pointer-events

Aby uzyskać więcej informacji na temat wskaźnika-events Proszę zapoznać się z dokumentacją: https://developer.mozilla.org/en/docs/Web/CSS/pointer-events?v=example

Answer 2

Jeśli nie chcesz śledzić kliknij zdarzenia w górnej warstwie, aby to osiągnąć, używając

pointer-events: none 

na górnej warstwie.

robocza Fiddle: http://jsfiddle.net/joycse06/ugGgN/6/

Albo można też zrobić to praca przez przekazywanie zdarzeń poprzez kliknięcie warstw jak pointer-events: none nie jest prawidłowo obsługiwany krzyżowego przeglądarkę. Spójrz na ten link http://www.vinylfox.com/forwarding-mouse-events-through-layers/

Answer 3

Możesz dodać "wskaźnik-zdarzenia: brak;" do zawierającego div elementu pozycjonowanego absolutnie. W ten sposób klikniesz przez element.

Answer 4

Sposób css jest dobry, ale jak powiedzieli, nie jest przeglądarką corss. W każdym razie, możesz znaleźć odpowiedź here, na stackoverflow. Masz dwa sposoby i gdybym był tobą, użyłbym js method.

Edytuj: zgodnie z tym, co robiłem, śledziłem przykład Js i otrzymałem this.

$('.a').on('click', function(event){ 
    var clickPos = [event.pageX, event.pageY]; 
    $('.element').each(function(){ 
     var t = $(this), 
      elemPos = [t.offset().left, t.offset().top], 
      elemSize = [t.width(), t.height()]; 

     if (
      clickPos[0] > elemPos[0] && clickPos[0] < elemPos[0] + elemSize[0] 
      && clickPos[1] > elemPos[1] && clickPos[1] < elemPos[1] + elemSize[1] 
     ) t.trigger('click'); 
    }); 
}); 

Answer 5

Sposób cross-browser do rozwiązania tego problemu jest użycie z-index aby umieścić go na warstwie nad rodzicem.