HTML의 의사 요소에 대한 클릭 이벤트를 어떻게 감지할 수 있습니까?

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

HTML에서 의사 요소는 실제로 존재하지 않고도 요소의 스타일과 시각적 기능을 확장합니다. DOM 트리. 이는 특히 의사 요소에서 클릭 이벤트를 감지하려고 할 때 문제가 됩니다.

다음 HTML 및 CSS를 고려하세요.

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

p {
    position: relative;
    background-color: blue;
}

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

이 예에서

요소에는 오른쪽 가장자리를 넘어 확장되는 빨간색 의사 요소가 있습니다. 목표는 파란색 직사각형이 아닌 빨간색 영역에서만 클릭 이벤트를 트리거하는 것입니다.

해결 방법

안타깝게도 이벤트를 의사에 직접 바인딩하는 것은 불가능합니다. -요소는 DOM 트리의 일부가 아니기 때문입니다. 클릭 핸들러는 상위 요소에만 바인딩될 수 있습니다.

원하는 기능을 얻으려면 해결 방법이 필요합니다.

• 를 열고

  태그.

• p:before 대신 .pspan에 CSS 스타일을 적용합니다.
• 클릭 핸들러를 .pspan 요소에 바인딩합니다.

이 접근 방식은 본질적으로 특정 관심 영역에 대한 이벤트 처리를 허용하면서 의사 요소의 동작을 시뮬레이션합니다.

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