CSS를 사용하여 div를 클릭할 수 없도록 설정하는 방법

CSS에서 div를 클릭할 수 없도록 설정하는 방법: 1. "event.preventDefault()" 메서드를 통해 이벤트의 기본 동작을 취소합니다. 2. "event.stopPropagation()을 통해 이벤트 전파를 중지합니다. " 방법.

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

추천: css 비디오 튜토리얼

CSS에서 div를 클릭할 수 없도록 설정하는 방법은 무엇입니까?

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

event.preventDefault()

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

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

event.stopPropagation()

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

이 두 가지는 JS에서 이벤트를 취소하는 데 일반적으로 사용되는 방법이지만 실제로는 사용하기 더 간단한 순수 CSS인 포인터 이벤트를 사용하여 이벤트 응답을 취소하는 또 다른 방법이 있습니다.

• 사용자의 클릭 동작 차단. 어떤 효과도 생성합니다

• 기본 마우스 포인터 표시를 방지합니다

• CSS의 호버 및 활성 상태 변경이 이벤트를 트리거하는 것을 방지합니다

• JavaScript 클릭 동작이 트리거되는 것을 방지합니다. 이벤트

Css에서 div를 클릭할 수 없도록 설정하려면 다음 코드를 사용할 수 있습니다.

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

이 방법은 확실히 js 코드보다 유연하지만 불행히도 ie9에서는 이를 지원하지 않습니다.

위 내용은 CSS를 사용하여 div를 클릭할 수 없도록 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!