CSS로 버튼을 사용할 수 없는 것을 제어하는 방법-CSS 튜토리얼-php.cn

CSS로 버튼을 사용할 수 없는 것을 제어하는 방법

青灯夜游

풀어 주다： 2022-12-30 11:12:08

원래의

6488명이 탐색했습니다.

방법: 버튼 요소가 마우스 이벤트의 대상이 되지 않도록 버튼 요소에 "pointer-events:none;" 스타일을 추가하고 클릭 이벤트를 무효화하며 버튼을 사용할 수 없도록 제어합니다.

CSS로 버튼을 사용할 수 없는 것을 제어하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, css3&&html5 버전, Dell G3 컴퓨터.

(동영상 공유 학습: css 동영상 튜토리얼)

HTML에서는 HTML의 비활성화 또는 읽기 전용 속성을 직접 사용하여 버튼을 클릭할 수 없게 만들 수 있고 CSS에서는 포인터 이벤트 속성을 사용하여 클릭을 무효화할 수 있습니다. 이벤트.

버튼에 "pointer-events:none" 두 개의 CSS 스타일을 추가하여 버튼을 클릭할 수 없게 만들 수 있습니다.

pointer-events 속성 요소가 마우스 이벤트의 대상이 아님을 나타내는 것 외에도 값 없음은 마우스 이벤트가 이 요소를 "침투"하고 요소 "아래"에 무엇이든 지정한다는 것을 의미합니다. 버튼의 클릭 이벤트를 무효화합니다.

예: CSS로 인해 버튼을 사용할 수 없게 됩니다.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			button {
				opacity: 0.5;
				/*设置蒙版效果*/
				pointer-events: none;
				/*禁止鼠标事件*/
			}
		</style>
	</head>

	<body>
		<button>php中文网</button>
	</body>

</html>

로그인 후 복사

설명:

pointer-events:none 스타일이 있는 요소는 마우스 이벤트의 대상이 되지 않습니다. 그러나 마우스 이벤트는 포인터 이벤트 속성이 다른 값을 지정하는 경우 하위 요소로 전달될 수 있습니다. 이 경우 마우스 이벤트는 캡처 또는 버블링 단계 동안 상위 요소의 이벤트 리스너를 트리거합니다.

요소가 마우스 이벤트의 대상이 되는 것을 방지하기 위해 포인터 이벤트를 사용한다고 해서 반드시 요소의 이벤트 리스너가 실행되지 않는다는 의미는 아닙니다. 하위 요소가 포인터 이벤트 속성을 명시적으로 지정하고 해당 요소가 마우스 이벤트의 대상이 되도록 허용하는 경우 해당 요소를 가리키는 모든 이벤트는 이벤트 전파 중에 상위 요소를 통해 전파되고 해당 요소에 대한 이벤트 리스너를 적절한 방식으로 트리거합니다. . 물론, 상위 요소에는 있지만 하위 요소에는 없는 화면에서의 마우스 활동은 상위 요소 및 하위 요소에 의해 캡처되지 않습니다(상위 요소를 통과하여 그 아래에 있는 요소를 가리킴).

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 CSS로 버튼을 사용할 수 없는 것을 제어하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!