절대 위치 요소를 통해 마우스 이벤트 전달

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

지금은 절대 위치 요소의 이벤트가 해당 요소에 부딪쳐 부모에게 버블 링되지만이 마우스 이벤트에 대해 "투명"하게하고 그 뒤에있는 모든 것에 전달하려고합니다. 이것을 어떻게 구현해야합니까?

pointer-events: none;

이벤트가 적용된 요소를 "통과"하고 "아래"요소에서 이벤트를 발생시키는 CSS 속성입니다.

자세한 내용은 https://developer.mozilla.org/en/css/pointer-events 를 참조하십시오.

IE 11까지 지원되지 않습니다. 다른 모든 공급 업체는 꽤 오랜 시간 동안 그것을 지원했습니다 (12 / '16에서 전 세계 지원은 ~ 92 %였습니다) : http://caniuse.com/#feat=pointer-events (댓글에 링크를 제공 한 @ s4y 덕분에) .

필요한 모든 것이 mousedown이면 다음과 같은 document.elementFromPoint방법으로 메소드를 수행 할 수 있습니다 .

1. mousedown에서 최상위 레이어를 제거하고
2. 통과 x하고 y받는 이벤트에서 좌표 document.elementFromPoint방법은 아래 요소를 얻고, 다음 할
3. 최상위 레이어를 복원합니다.

또한 알아두면 좋습니다 ...
포인터 이벤트는 부모 요소 (아마도 투명한 div)에 대해 비활성화 할 수 있지만 자식 요소에 대해서는 활성화 할 수 있습니다. 이 방법은 여러 레이어의 하위 요소를 클릭 할 수있는 여러 개의 겹치는 div 레이어로 작업 할 때 유용합니다. 이를 위해 모든 육아 div get pointer-events: none및 click-children은 포인터 이벤트를 다음과 같이 다시 활성화합니다.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>

이벤트를받지 못하는 이유는 절대 위치 요소가 "클릭"할 요소의 하위 요소가 아니기 때문입니다 (파란색 div). 내가 생각할 수있는 가장 깨끗한 방법은 절대 요소를 클릭하려는 자녀의 자녀로 두는 것입니다.하지만 그렇게 할 수 없거나 여기 에이 질문을 게시하지 않았다고 가정합니다. :)

또 다른 옵션은 절대 요소에 대한 클릭 이벤트 핸들러를 등록하고 파란색 div에 대한 클릭 핸들러를 호출하여 둘 다 플래시하는 것입니다.

이벤트가 DOM을 통해 발생하는 방식으로 인해 더 간단한 답변이 있는지 확실하지 않지만 다른 사람이 모르는 트릭이 있으면 매우 궁금합니다!

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

나는 그것을 정리하고 jQuery 플러그인으로 만들었다.

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

불행히도, 내가 사용했던 목적-Google지도에 마스크를 오버레이하면 클릭 및 드래그 이벤트가 캡처되지 않고 마우스 커서가 변경되지 않아 IE 및 Opera에서 마스크를 숨기기로 결정한 사용자 경험이 저하됩니다. 포인터 이벤트를 지원하지 않는 두 브라우저

마우스 이벤트가 필요한 요소를 알고 오버레이가 투명한 경우 z- 색인을 오버레이보다 높은 것으로 설정하면됩니다. 이 경우 모든 이벤트는 모든 브라우저에서 작동해야합니다.