마우스 이벤트를 절대 위치 요소에 통과시킵니다.

마우스 이벤트를 절대 위치 요소에 통과시킵니다.

다른 절대 위치 요소가 위에 있는 요소에서 마우스 이벤트를 캡처하려고 합니다.

지금은 절대 위치에 있는 요소의 이벤트가 부딪혀 부모에게 버블이 됩니다만, 이러한 마우스 이벤트에 대해서는 「투명」하게 해, 그 배후에 있는 모든 요소에 전달해 주었으면 합니다.어떻게 구현하면 좋을까요?

pointer-events: none;

속성이 적용되는 HTML 요소를 이벤트가 "통과"하도록 하는 CSS 속성입니다."아래" 요소에서 이벤트를 발생시킵니다.

상세한 것에 대하여는, https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events 를 참조해 주세요.

IE11을 포함한 거의 모든 브라우저에서 지원됩니다.글로벌 지원은 05/'21의 경우 98.2%까지였습니다.http://caniuse.com/ #comments=s4y가 코멘트에 링크를 제공했기 때문입니다.

또알알 돼서서 ...쁘......
포인터 이벤트는 부모 요소(아마도 트랜스페어런트 div)에 대해 비활성화할 수 있지만 자녀 요소에 대해서는 활성화할 수 있습니다.이 기능은 겹치는 여러 개의 div 레이어를 사용하는 경우 모든 레이어의 하위 요소를 클릭할 수 있는 경우에 유용합니다.이걸 위해 모든 육아 디바들은pointer-events: none 조작이 다시 됩니다.pointer-events: all

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:all;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>

필요한 것은, 다음의 방법으로 해결할 수 있습니다.

1. 모우다운의 맨 위층을 제거한다.
2. x ★★★★★★★★★★★★★★★★★」y로부터 「」까지의 .document.elementFromPoint the in the internal, 그 method to get the under the internal, 요 method method 、 method method method method 、 method method method 。
3. 상단 레이어느쪽이든 상관없습니다.

이벤트를 수신하지 않는 이유는 절대 위치 요소가 "클릭"하려는 요소의 하위 요소가 아니기 때문입니다(파란색 구분).제가 생각할 수 있는 가장 깔끔한 방법은 클릭할 요소의 자녀로 절대 요소를 넣는 것입니다만, 그렇게 할 수 없거나 이 질문을 여기에 올리지 않았을 것입니다.

또 하나의 옵션은 절대 요소의 클릭 이벤트핸들러를 등록하고 파란색 div의 클릭핸들러를 호출하면, 양쪽이 점멸합니다.

DOM을 통해 일어나는 일들로 인해, 당신에게 더 간단한 답이 있을지 모르겠지만, 제가 모르는 트릭이 또 있는지 궁금하네요!

한 div에서 다른 div로 이벤트를 수동으로 리디렉션하는 Javascript 버전이 있습니다.

정리해서 jQuery 플러그인으로 만들었습니다.

다음은 Github 저장소입니다.https://github.com/BaronVonSmeaton/jquery.forwardevents

아쉽게도 구글 맵 위에 마스크를 덮어쓰는 목적은 클릭 및 드래그 이벤트를 캡처하지 않았고 마우스 커서가 변경되지 않아 포인터 이벤트를 지원하지 않는 IE와 Opera 아래에 마스크를 숨기기로 결정했습니다.

마우스 이벤트가 필요한 요소를 알고 있고 오버레이가 투명하면 해당 요소의 z 인덱스를 오버레이보다 높은 값으로 설정할 수 있습니다.물론 이 경우 모든 이벤트는 모든 브라우저에서 작동합니다.

언급URL : https://stackoverflow.com/questions/1009753/pass-mouse-events-through-absolutely-positioned-element