이 기사에서는 CSS를 사용하여 클릭 이벤트를 비활성화하는 방법을 배웁니다.
시작하겠습니다!
CSS를 사용하여 클릭 이벤트를 비활성화하는 방법은 무엇입니까?
CSS '를 사용하여 클릭 이벤트를 비활성화할 수 있습니다. 포인터 이벤트 ' 재산. 그러나 그것에 뛰어 들어 간단히 설명하겠습니다.
'포인터 이벤트' CSS 속성이란 무엇입니까?
' 포인터 이벤트 ' HTML 요소가 클릭 또는 탭 이벤트, 활성 또는 호버 상태, 커서 표시 여부와 같은 터치 이벤트에 응답하거나 동작하는 방식을 제어합니다.
통사론
포인터 이벤트의 구문은 다음과 같습니다.
포인터 이벤트 : 자동 | 없음 ;
위의 언급 속성은 ' 자동 ' 그리고 ' 없음 ':
- 자동: 기본 이벤트를 수행하는 데 사용됩니다.
- 없음: 이벤트를 비활성화하는 데 사용됩니다.
참고: 아래 주어진 예제는 먼저 두 개의 활성 버튼을 추가하는 방법을 보여주고 두 번째 버튼의 클릭 이벤트를 비활성화합니다.
예제 1: CSS를 사용하여 버튼의 클릭 이벤트 비활성화
이 예에서는 제목
과 두 개의 버튼을 만듭니다. 다음으로 ' 단추 '를 첫 번째 버튼의 클래스 이름으로 지정하고 ' 단추 ' 그리고 ' 버튼2 '를 두 번째 버튼의 클래스로 사용합니다.
HTML
< div >< h1 > CSS를 사용하여 클릭 이벤트 비활성화 < / h1 >
< 단추 수업 = '단추' > 활성화 버튼 < / 단추 >
< 단추 수업 = '버튼 버튼2' > 비활성화 버튼 < / 단추 >
< / div >
CSS에서 ' .단추 '는 HTML 파일에 생성된 두 버튼에 모두 액세스하는 데 사용됩니다. 다음으로 테두리 스타일을 ' 없음 '와 같이 패딩을 제공합니다. 25픽셀 '. 그런 다음 버튼 텍스트의 색상을 ' RGB(29, 6, 31) ', 버튼 배경은 ' RGB(19, 192, 163) '. 또한 버튼의 반경을 ' 5픽셀 '.
CSS
.단추 {국경 : 없음 ;
심 : 25픽셀 ;
색깔 : RGB ( 29 , 6 , 31 ) ;
배경색 : RGB ( 19 , 192 , 163 ) ;
경계 반경 : 5픽셀 ;
}
그런 다음 두 버튼에 :active 의사 클래스를 ' .버튼:활성 '로 설정하고 버튼의 색상을 ' RGB(200, 255, 0) ':
.단추 : 활동적인 {배경색 : RGB ( 209 , 65 , 65 ) ;
}
결과적으로 다음과 같은 결과가 표시됩니다.
이제 두 번째 버튼에 대한 클릭 이벤트를 비활성화하는 다음 부분으로 이동합니다.
이렇게 하려면 ' .버튼2 ' HTML 파일에 생성된 두 번째 버튼에 접근한 후 pointer-events 속성 값을 ' 없음 ':
.버튼2 {포인터 이벤트 : 없음 ;
}
pointer-events 속성을 사용하고 값을 non으로 설정하면 다음 출력에서 볼 수 있는 클릭 이벤트가 비활성화됩니다.
CSS를 사용하여 클릭 이벤트를 비활성화하는 가장 쉬운 방법을 제공했습니다.
결론
HTML에서 클릭 이벤트를 비활성화하려면 ' 포인터 이벤트 ” CSS의 속성을 사용합니다. 이를 위해 HTML 요소를 추가하고 pointer-events 속성 값을 ' 없음 ' 클릭 이벤트를 비활성화합니다. 이 문서에서는 CSS를 사용하여 클릭 이벤트를 비활성화하는 방법을 예제와 함께 설명했습니다.