yếu tố vị trí tuyệt đối của jquery nhấp vào

Question

Tôi gặp sự cố với nhấp chuột div vị trí tuyệt đối. Tôi đang phát triển một trang web với đường cuộn jquery và thêm các lớp bổ sung để có được hiệu ứng thị sai và lớp trên cùng bao gồm các nút trong lớp chính và chúng không thể được nhấp, lơ lửng, vv.

Here là đơn giản 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; 
} 
} 

tôi cần phải giữ cấu trúc html này và khả năng nhấp div trong div vị trí tuyệt đối với thấp hơn z-index. Có thể không?

Answer 1

Bạn có thể đặt pointer-events thành none trên phần tử phía trên để ngăn nó phản ứng trên các sự kiện chuột.

pointer-events:none; 

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

chéo hỗ trợ trình duyệt là rất tốt những ngày này: http://caniuse.com/#feat=pointer-events

Để biết thêm thông tin về con trỏ-sự kiện xin vui lòng xem tài liệu: https://developer.mozilla.org/en/docs/Web/CSS/pointer-events?v=example

Answer 2

Nếu bạn không cần phải theo dõi nhấp vào các sự kiện trong lớp phía trên, sau đó bạn có thể đạt được điều này bằng cách sử dụng

pointer-events: none 

trên lớp trên.

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

Hoặc bạn cũng có thể làm cho nó hoạt động bằng cách chuyển tiếp các sự kiện nhấp chuột qua các lớp như pointer-events: none không được hỗ trợ đúng trình duyệt chéo. Hãy xem liên kết này http://www.vinylfox.com/forwarding-mouse-events-through-layers/

Answer 3

Bạn có thể thêm "pointer-events: none;" vào div chứa phần tử được định vị hoàn toàn. Bằng cách đó bạn sẽ bấm máng phần tử.

Answer 4

Cách css là tốt nhất, nhưng như họ nói là không có trình duyệt corss. Dù sao, bạn có thể tìm thấy câu trả lời here, trên stackoverflow. Bạn có hai cách và nếu tôi là bạn tôi sẽ sử dụng js method.

Chỉnh sửa: theo những gì bạn có i theo ví dụ js và tôi nhận 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

Cách trình duyệt chéo để giải quyết vấn đề này là sử dụng z-index để định vị nó trên lớp phía trên bố mẹ.