CSS3의 포인터 이벤트 사용에 대한 자세한 설명

이번에는 CSS3 포인터 이벤트 사용에 대한 자세한 설명을 가져왔습니다. CSS3 포인터 이벤트 사용 시 주의사항은 무엇인가요?

포인터 이벤트란 무엇인가요?

이름에서 알 수 있듯이 포인터 이벤트는 HTML 포인터 이벤트에 대한 속성입니다.

pointer-events는 hover/focus/active 및 기타 HTML 요소의 동적 효과를 비활성화할 수 있습니다.

기본값은 auto이며, 구문은 다음과 같습니다.

pointer-events: auto | none | visiblefill | visible Stroke | 다른 속성은 SVG 요소에만 적용됩니다.

auto: 포인터 이벤트를 사용할 수 있습니다.

none: 포인터 이벤트를 비활성화합니다. 포인터가 비활성화된 요소에 하위/상위 요소가 있는 경우 시간 버블링/캡처 단계 중에 해당 하위/상위 요소에서 이벤트가 트리거됩니다.

일반적인 시나리오

1. 라벨 이벤트 효과 비활성화

탭 전환 시 현재 항목이 선택되면 현재 탭의 이벤트가 비활성화됩니다. 다른 탭을 전환할 때만 새 데이터가 다시 요청됩니다.

<!--CSS-->
 <style>
     .active{
         pointer-events: none;
     }
 </style>
 <!--HTML-->
 <ul>
     <li><a class="tab"></a></li>
     <li><a class="tab active"></a></li>
     <li><a class="tab"></a></li>
 </ul>

2. 스위치 켜기/끄기

버튼

상태 제출 버튼을 클릭할 때 사용자가 항상 버튼을 클릭하여 요청을 보내는 것을 방지하기 위해 요청이 결과를 반환하지 않는 경우, 포인터 이벤트 추가: 버튼에 없음을 추가하면 비즈니스에서도 매우 흔히 발생하는 이러한 상황을 방지할 수 있습니다.

<!--CSS-->
 .j-pro{
     pointer-events: none;
 }
 <!--HTML-->
 <button r-model={this.submit()} r-class={{"j-pro": flag}}>提交</button>
 <!--JS-->
 submit: function(){
     this.data.flag = true;
     this.$request(url, {
         // ...
         onload: function(json){
             if(json.retCode == 200){
                 this.data.flag = false;
             }
         }.bind(this)
         // ...
     });
 }

3. 투명한 요소와 클릭 가능한 요소가 겹치지 않도록 방지

보기 좋은 CSS 효과를 얻기 위해 요소 위에 다른 요소가 있을 때 일부 콘텐츠 표시 영역이 가려집니다. 아래 요소의 이벤트에 영향을 미치므로 해당 요소에 포인터 이벤트를 추가하면 문제가 해결됩니다.

<!--CSS-->
 .layer{
     backround: linear-gradient(180deg, #fff, transparent);
 }
 .j-pro{
     poninter-events: none;
 }
 <!--HTML-->
 <ul>
     <li class="layer j-pro"></li>
     <li class="item"></li>
     <li class="item"></li>
     <li class="item"></li>
 </ul>

poninter-events 호환성

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 자료:

의사 요소 사용에 대한 자세한 설명::before 및 ::after

CSS3를 사용하여 원활한 캐러셀 광고 만들기

CSS3으로 폭포 흐름 레이아웃을 구현하는 방법

위 내용은 CSS3의 포인터 이벤트 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!