상호작용

사용자가 웹 사이트 콘텐츠와 상호 작용하는 방식을 변경하는 유틸리티 클래스입니다.

텍스트 선택

사용자가 콘텐츠와 상호 작용할 때 콘텐츠가 선택되는 방식을 변경합니다.

이 단락은 사용자가 클릭하면 완전히 선택됩니다.

이 단락에는 기본 선택 동작이 있습니다.

이 단락은 사용자가 클릭하면 선택할 수 없습니다.

HTML

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

포인터 이벤트

부트스트랩은 요소 상호 작용을 방지하거나 추가하는 클래스를 .pe-none제공 합니다..pe-auto

이 링크 는 클릭할 수 없습니다.

이 링크 를 클릭할 수 있습니다(기본 동작).

pointer-events속성이 부모로부터 상속 되기 때문에 이 링크 를 클릭 할 수 없습니다 . 그러나 이 링크 에는 pe-auto클래스가 있으며 클릭할 수 있습니다.

HTML

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

.pe-none클래스(및 설정한 CSS pointer-events속성)는 포인터(마우스, 스타일러스, 터치)와의 상호 작용만 방지합니다. 가 포함된 링크 및 컨트롤 .pe-none은 기본적으로 키보드 사용자가 여전히 포커스를 맞추고 실행할 수 있습니다. 키보드 사용자의 경우에도 완전히 무효화되도록 하려면 tabindex="-1"(키보드 포커스를 받는 것을 방지하기 위해) 및 aria-disabled="true"(보조 기술에 효과적으로 비활성화되어 있다는 사실을 전달하기 위해)와 같은 추가 속성을 추가하고 JavaScript를 사용하여 가능하면 실행 가능한 것을 완전히 방지합니다.

가능한 경우 더 간단한 솔루션은 다음과 같습니다.

양식 컨트롤의 경우 disabledHTML 속성을 추가합니다.

링크의 경우 속성을 제거하여 href비대화형 앵커 또는 자리 표시자 링크로 만듭니다.

사스

유틸리티 API

상호 작용 유틸리티는 의 유틸리티 API에 선언되어 있습니다 scss/_utilities.scss. 유틸리티 API를 사용하는 방법을 알아보세요.

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),