CSS 의사 요소에서 클릭 이벤트를 감지할 수 있습니까?

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

질문:

제공된 코드에서, 클릭 이벤트는 의사 요소(빨간색 비트)와 기본 요소(파란색 비트) 모두에서 트리거됩니다. 그러나 목표는 의사 요소에 대한 클릭만 감지하는 것입니다. 이것이 가능합니까?

답변:

아니요, 의사 요소가 문서 개체의 일부로 존재하지 않기 때문에 의사 요소에 대한 클릭 이벤트를 직접 감지하는 것은 불가능합니다. 모델(DOM). 의사 요소는 브라우저에 의해 생성되며 실제 HTML 구조의 일부가 아닌 가상 요소입니다.

대체 접근 방식:

클릭을 구현해야 하는 경우 특히 빨간색 영역을 위한 핸들러를 사용하면 범위와 같은 하위 요소를 생성할 수 있습니다.

<p>
  <span class="red-bit"></span>
  Lorem ipsum dolor sit amet, ...
</p>

그런 다음 스타일을 적용합니다. 범위 요소에:

.red-bit {
  position: absolute;
  left: 100%;
  width: 10px;
  height: 100%;
  background-color: red;
}

마지막으로 클릭 핸들러를 범위 요소에 바인딩합니다.

document.querySelector(".red-bit").addEventListener("click", function() {
  // Click handler code
});

이 접근 방식을 사용하면 클릭이 발생하는 것을 방지하면서 빨간색 영역에 대한 클릭을 캡처할 수 있습니다. 주요 요소에서 트리거됩니다.

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