CSS 의사 요소에서 클릭 이벤트를 어떻게 감지할 수 있나요?

의사 요소에서 클릭 이벤트 감지

:before 및 :after와 같은 유사 요소는 다음을 통해 HTML 요소의 스타일 지정 기능을 향상시킵니다. 가상 콘텐츠를 삽입합니다. 그러나 이러한 가상 요소는 DOM의 일부가 아니며 직접적인 이벤트 처리 기능이 부족합니다.

주어진 예에서 빨간색 의사 요소(p:before를 사용하여 생성됨)에서만 클릭 이벤트를 감지하는 것은 문제가 있습니다. 의사 요소는 DOM에 표시되지 않으므로 클릭 이벤트를 DOM에 직접 바인딩할 수 없습니다.

해결책:

원하는 동작을 얻으려면 하위 요소 사용을 고려하세요. 의사 요소 대신 요소. 요소를 열고

꼬리표. 현재 p:before에 적용된 스타일을 이 대신 요소를 사용하세요.

<p>
  <span></span>Lorem ipsum dolor sit amet...
</p>

p span {
  content: '';
  position: absolute;
  left:100%;
  width: 10px;
  height: 100%;
  background-color: red;
}

이제 클릭 이벤트를 요소에 따라 이벤트를 처리합니다.

참고:

의사 요소 내의 하위 요소에 이벤트를 바인딩하는 것은 모든 브라우저에서 일관되게 지원되지 않습니다. 최적의 브라우저 간 호환성을 위해 이벤트 처리에 의사 요소를 사용하는 대신 위의 접근 방식을 사용하는 것이 좋습니다.

위 내용은 CSS 의사 요소에서 클릭 이벤트를 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!