집 >웹 프론트엔드 >CSS 튜토리얼 >순수 CSS를 사용하여 마우스 클릭 이벤트를 비활성화하는 예제 코드

순수 CSS를 사용하여 마우스 클릭 이벤트를 비활성화하는 예제 코드

不言원래의: 2018-06-05 14:46:331848검색

이 글에서는 순수 CSS를 통해 마우스 클릭 이벤트를 비활성화하는 방법을 소개합니다. 필요한 경우 참고할 수 있습니다.

JavaScript에는 이벤트의 기본 작업을 취소하는 데 사용할 수 있는 preventDefault 메서드가 있습니다. 링크 열기, 텍스트 선택, 드래그 앤 드롭 등.

코드를 복사하세요.

코드는 다음과 같습니다.

event.preventDefault()

이 메서드는 이벤트와 관련된 기본 작업(해당 작업이 있는 경우)을 수행하지 않도록 웹 브라우저에 알립니다. 예를 들어 type 속성이 "submit"인 경우 이벤트 전파의 모든 단계에서 모든 이벤트 핸들러를 호출할 수 있으며, 이 메서드를 호출하면 양식 제출을 방지할 수 있습니다. Event 객체의 취소 가능 속성이 fasle인 경우 기본 동작이 없거나 기본 동작을 방지할 수 없습니다. 두 경우 모두 이 메서드를 호출해도 효과가 없습니다.

이 방법은 현재 요소의 브라우저 기본 동작을 방지할 수 있지만 상위 요소와 문서에서 이벤트에 응답하는 것을 방지하지는 않습니다. 이벤트를 완전히 취소하려면 stopPropagation

코드를 복사하세요

코드는 다음과 같습니다.

event.stopPropagation()

이 방법을 사용하면 이벤트 전파를 중지하고 이벤트가 전달되는 것을 방지할 수 있습니다. 다른 Document 노드에. 이벤트 전파의 모든 단계에서 호출할 수 있습니다. 이 메서드는 동일한 Document 노드의 다른 이벤트 핸들러가 호출되는 것을 방지할 수는 없지만 이벤트가 다른 노드로 전달되는 것을 방지할 수 있습니다.

이 두 가지 방법은 JS에서 이벤트를 취소하는 데 일반적으로 사용되지만 실제로는 순수한 CSS를 사용하여 이벤트 응답을 취소하는 또 다른 방법인 pointer-events가 있습니다. 이 방법은 다음과 같이 할 수 있습니다.

1, 사용자의 오류를 방지합니다. 클릭 동작이 효과를 생성하지 못하도록 방지

2. 기본 마우스 포인터 표시 방지

3. CSS의 호버 및 활성 상태 변경이 이벤트를 트리거하지 못하도록 방지

4. JavaScript 클릭 동작에 의해 트리거되는 이벤트 방지

예를 들어 다음과 같습니다. CSS는 비활성화된 버튼을 회색으로 표시하는 효과를 갖습니다

코드 복사

코드는 다음과 같습니다.

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

이 방법은 분명히 js 코드보다 유연하지만 안타깝게도 IE9에서는 이를 지원하지 않습니다. 이상이 이 글의 전체 내용입니다. 모든 분들의 공부와 업무에 도움이 되었으면 좋겠습니다.

순수 CSS를 사용하여 마우스 클릭 이벤트를 비활성화하는 예제 코드

관련 기사