포인팅에 대한 표시

원치 않는 클릭 및 터치 상호 작용을 방지하려면 포인터 이벤트를 사용하세요.

겹치는 구성 요소 또는 마우스 오버 전환이 있는 배열은 때때로 의도하지 않은 마우스 동작을 활성화하고 웹 사이트 방문자에게 수준 이하의 경험을 추가할 수 있습니다. 포인팅 큐를 사용하면 요소의 클릭 또는 터치 동작을 비활성화하여 시각적 전용 구성 요소가 다른 구성 요소와의 활동을 방해하지 않도록 할 수 있습니다.

이 튜토리얼에서는 다음을 알아봅니다. 

  1. 포인팅 단서를 사용하는 방법
  2. 일반적인 질문

포인팅 단서를 사용하는 방법

포인팅 큐를 활용하면 의도한 구성 요소만 클릭 및 터치 동작에 반응하도록 할 수 있습니다. 이는 겹치는 구성 요소(예: 오버레이된 텍스트나 아이콘이 있는 배경 비디오) 또는 호버 이동이나 도구 설명이 있는 디자인에 대한 작업을 관리하는 데 유용합니다.

Webflow에는 포인팅 큐에 대한 두 가지 선택 사항이 있습니다. 

  • 자동적 인 — 모든 구성 요소에 대한 기본 설정으로, 표준 클릭 및 터치 동작을 허용합니다.
  • 없음 — 모든 포인팅 신호(예: 클릭 및 터치 동작)를 금지합니다.  
유용한 힌트: 구성할 수 있습니다. 포인팅 에게 없음 디자인 레이아웃을 변경하지 않고 디자인 문제를 해결하거나 수정하기 위해 클릭 및 터치 동작을 일시적으로 비활성화합니다.

작업을 비활성화하도록 포인팅 신호를 구성하는 방법

구성 요소에 대한 작업을 비활성화하도록 포인팅 신호를 구성하려면 다음을 수행하십시오. 

  1. 캔버스에서 구성요소를 선택합니다.
  2. 향하다 스타일 패널 > 효과 > 이벤트
  3. 조정하다 포인팅 에게 없음 

다음을 포함하는 구성요소 포인팅 로 설정 없음 "와 함께 나타납니다.클릭하지 마세요" 기호가 네비게이터 패널에 표시됩니다.

주목: 다음을 포함하는 구성요소 포인팅 로 설정 없음 순차 키보드 탐색에서는 여전히 포커스를 받습니다. 열쇠. 

필수적인: 다음을 포함하는 구성요소 포인팅 로 설정 없음 계속 표시되지만 캔버스에서 선택할 수는 없습니다. 다음이 포함된 구성요소를 선택하려는 경우 포인팅 로 설정 없음, 탐색기 패널에서 그렇게 할 수 있습니다.

자손 구성 요소 구성 요소의 포인팅 로 설정 없음 포인팅 큐 설정을 상속하고 ~ 아니다 "로 표시클릭하지 마세요" 기호가 네비게이터 패널에 표시됩니다. 상속된 포인팅 큐 설정을 재정의하여 하위 구성 요소를 대화형으로 만들려면 탐색기 패널에서 하위 구성 요소를 선택하고 다음을 방문하세요. 스타일 패널 > 효과 > 이벤트, 그리고 조정 포인팅 에게 자동적 인.

주목: 조정하여 구성 요소에 대한 작업을 비활성화하는 경우 포인팅 에게 없음 그런 다음 마우스 트리거(예: 마우스 클릭(탭), 마우스 호버 등)를 사용하여 해당 구성 요소에 액션을 연결하면 해당 액션이 트리거되지 않습니다.

일반적인 질문

오버레이된 구성요소가 위에 있음에도 불구하고 클릭할 수 없는 이유는 무엇입니까? 

오버레이된 구성 요소에 대해 포인팅을 없음으로 구성하여 비대화형으로 렌더링할 수 있습니다. 조정하다 포인팅 에게 자동적 인 이 동작이 의도적이지 않은 경우 동작을 활성화합니다.

Pointing to None을 구성했지만 여전히 원하지 않는 동작이 발견되었습니다. 왜? 

페이지의 다른 구성 요소, 특히 상위 구성 요소 또는 겹치는 구성 요소가 이 구성 요소의 작업에 영향을 미칠 수 있습니다. 모든 관련 구성요소에 대해 포인팅 큐를 적절하게 구성했는지 확인하십시오.

이완 막
Ewan Mak의 최신 게시물 (모두 보기)