jquery 절대 위치 요소 클릭

절대 위치가 지정된 div의 클릭에 문제가 있습니다. jquery 스크롤 경로가있는 웹 사이트를 개발 중이고 시차 효과를 얻으려면 추가 레이어를 추가하고 맨 위 레이어는 맨 위 레이어의 버튼을 다루고 클릭 할 수 없으며 매달려있을 수 있습니다.jquery 절대 위치 요소 클릭

Here은 간단 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; 
} 
}

나는이 HTML 구조와 낮은 Z- 인덱스와 절대 위치 DIV의 DIV 년대를 클릭 할 수있는 능력을 유지해야합니다. 가능한가?

출처

2013-06-02 Lukas Ignatavičius

상단의 요소에 pointer-events에서 none을 설정하여 마우스 이벤트에 반응하지 않게 할 수 있습니다. 추적 할 필요가없는 경우 https://developer.mozilla.org/en/docs/Web/CSS/pointer-events?v=example

출처

2013-06-02 16:10:07

@mikemaccana 지적 해 주셔서 감사합니다. 나는 그것을 지금 조금 개선했다. 나는 기회가 생길 때 좀 더 많은 정보를 추가 할 것이다. –

: 설명서를 참조하시기 바랍니다 포인터 이벤트에 대한 자세한 내용은 http://caniuse.com/#feat=pointer-events

pointer-events:none;

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

크로스 브라우저 지원은 요즘 매우 좋다 상위 레이어의 이벤트를 클릭하면 다음을 사용하여이를 달성 할 수 있습니다.

pointer-events: none

위층에 있습니다.

작업 바이올린 : http://jsfiddle.net/joycse06/ugGgN/6/

또는 당신은 또한 pointer-events: none로 레이어를 통해 클릭 이벤트를 전달하여 작동 할 수 있습니다 제대로 크로스 브라우저를 지원하지 않습니다. 이 링크를 한번보세요. http://www.vinylfox.com/forwarding-mouse-events-through-layers/

출처

2013-06-02 16:10:31

"pointer-events : none;"을 추가 할 수 있습니다. 절대적으로 배치 된 요소의 포함 div로 이동합니다. 그렇게하면 물마루 요소를 클릭하게됩니다.

출처

2013-06-02 16:10:45 jvakuiler

CSS 방식은 좋지만 CSS는 없다고합니다. 어쨌든, 당신은 대답 here, stackoverflow에 찾을 수 있습니다. 두 가지 방법이 있습니다. 내가 너라면 js method을 사용할 것입니다.

: js 예제를 따라 무엇을했는지에 따라 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'); 
    }); 
});

출처

2013-06-02 16:26:09 stefanz

이 문제를 해결하기위한 브라우저 방식은 z-index을 사용하여 상위 위의 레이어에 배치하는 것입니다.

출처

2015-09-30 05:31:09

jquery 절대 위치 요소 클릭

답변

관련 문제