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

또한 알아두면 좋습니다 …
포인터 이벤트는 부모 요소 (아마도 투명한 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>

답변