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

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

DOM 구조에 영향을 주지 않고 요소의 스타일을 지정하기 위해 의사 요소를 사용하는 것이 일반적입니다. 그러나 이러한 의사 요소에 이벤트 핸들러를 연결하려고 할 때 일반적인 문제가 발생합니다.

문제:

제공된 코드 조각은 클릭이 발생하는 문제를 보여줍니다. 상위 요소를 클릭하면 상위 요소(파란색 비트)와 의사 요소(빨간색 비트) 모두에서 이벤트가 트리거됩니다. 목표는 의사 요소에서만 클릭 이벤트를 감지하는 것입니다.

해결책:

안타깝게도 이벤트 핸들러를 의사 요소에 직접 첨부하는 것은 불가능합니다. 요소는 DOM의 일부가 아니기 때문입니다. 그러나 해결 방법이 있습니다.

1. 하위 요소 생성: 의사 요소를 사용하는 대신 하위 요소(예: 범위)를 생성합니다.
2. 하위 요소 배치: 오프닝 바로 뒤에 하위 요소를 배치합니다

   태그.

3. 하위 요소에 스타일 적용: 의사 요소 대신 하위 요소에 원하는 스타일을 적용합니다.
4. 이벤트 핸들러 연결: 이벤트 핸들러(예: 클릭)를 하위 요소에 바인딩합니다.

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