포인터 이벤트 속성 사용에 대한 자세한 설명(코드 예)-CSS 튜토리얼-php.cn

포인터 이벤트 속성 사용에 대한 자세한 설명(코드 예)

青灯夜游

풀어 주다： 2018-11-07 13:57:38

원래의

3240명이 탐색했습니다.

이 글에서는 포인터 이벤트 속성(코드 예제) 사용에 대한 자세한 설명을 제공하므로 포인터 이벤트 속성이 수행할 수 있는 작업과 그 효과가 무엇인지 이해할 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이전 글에서【pointer-events 속성이 무엇인지에 대해 간략히 살펴봤습니다. "pointer-events 속성 사용법"에서는 포인터 이벤트 속성이 무엇인지 소개하고 html 요소에 적용 가능한 사용법 구문에 대해 알아봤습니다. 따라서 이번 글에서는 포인터 이벤트 속성의 사용법을 자세히 살펴보겠습니다. [추천 학습 영상 튜토리얼: css3 tutorial]

먼저 pointer-events 속성의 역할을 살펴보겠습니다:

HTML 요소에서 포인터 이벤트 속성을 사용할 때, 요소는 마우스(또는 터치) 이벤트에 응답할 수 있습니다. 클릭, 상태(CSS 활동, 포커스 및 호버 상태) 및 커서 작업(예: 링크에 포인터 커서 표시)을 방지하는 데 사용할 수 있습니다.

요소가 포인터 이벤트에 응답하도록 하거나(자동) 그렇게 하지 않도록 할 수 있습니다(없음). 포인터 이벤트에 응답하지 못하게 하면 그 아래의 요소가 이러한 이벤트의 대상이 됩니다. 이 요소를 클릭하면 그 아래 요소가 클릭 이벤트를 수신합니다. 호버 및 기타 커서 작업에도 동일하게 적용됩니다. 예를 들어, 포인터 이벤트: 없음으로 설정할 요소 아래 요소의 텍스트를 선택할 수 있습니다(아래 예 참조).

pointer-events 속성은 다양한 시나리오에서 매우 유용합니다. 이 속성의 한 가지 장점은 포인터 이벤트를 사용하여 60fps 스크롤을 생성할 수 있다는 것입니다.

비활성화된 요소의 포인터 이벤트를 하위 요소에 사용(재정의)할 수 있습니다. 요소의 하위 요소에 포인터 이벤트:자동이 있는 경우(즉, 활성화된 경우) 상위 요소가 그렇지 않은 경우에도 처리하고 응답할 수 있습니다. 클릭 이벤트.

이제 pointer-events 속성의 예를 살펴보겠습니다.

예에서 오버레이 요소는 전체 페이지 위에 위치하며 오버레이에는 포인터 이벤트가 설정되어 있지 않습니다. 아래에 있는 앵커 표시를 클릭하세요. 또한 링크 위로 마우스를 가져가면 커서가 포인터(손바닥 모양)로 바뀌는 것을 확인하세요. 마우스를 올리면 해당 링크가 트리거됩니다.

HTML 코드:

<div class="overlay"><h1>覆盖层</h1></div>
<div class="container">
    <h1>Pointer-Events 演示</h1>
    <p>
        Pointer-Events 演示，<a href="#">指针 演示</a>, Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示，<a href="#">指针 演示</a>。 Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示。
    </p>
    <p>
        Pointer-Events 演示Pointer-Events 演示Pointer-Events 演示Pointer-Events 演示Pointer-Events 演示Pointer-Events 演示<a href="#">指针演示，</a>Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示，Pointer-Events 演示!
    </p>
</div>

로그인 후 복사

css 코드:

.container {
    margin: 40px auto;
    width: 510px;
    background-color: white;
    padding: 2em;
    font-size: 20px;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 1;
    color: white;
    text-align: center;
    pointer-events: none;
}
.overlay h1 {
  font-size: 80px;
  line-height: 4;
}

로그인 후 복사

데모 보기:

포인터 이벤트 속성 사용에 대한 자세한 설명(코드 예)