자식 요소의 클릭 이벤트가 부모 요소의 두 번 클릭 이벤트를 트리거하지 않도록하는 방법은 무엇입니까?

어린이 요소 클릭과 부모 요소 간의 충돌을 영리하게 피하십시오.

프론트 엔드 개발에서는 자식 요소 클릭 이벤트와 부모 요소 더블 클릭 이벤트 간의 충돌은 종종 두통입니다. 특히 자식 요소를 빠르게 클릭 할 때는 상위 요소의 두 번 클릭 이벤트를 실수로 트리거 할 수 있습니다. 이 기사는이 문제를 효과적으로 해결하는 두 가지 방법을 제공합니다.

HTML 구조가 다음과 같다고 가정합니다.

<div>
    <div></div>
</div>

해당 이벤트 처리 기능 :

 showpreset (이벤트) {
    console.log ( 'aaaaa');
}

ChangeFullScreen () {
    console.log ( 'bbbb');
}

클릭 이벤트 및 두 번 클릭 이벤트 이벤트 유형이기 때문에 간단한 event.stopPropagation() return false 문제를 해결하지 못합니다.

방법 1 : 자식 요소에 빈 더블 클릭 이벤트 추가

하위 요소에 빈 더블 클릭 이벤트 핸들러를 묶으려면 이중 클릭 이벤트가 버블 링되는 것을 방지합니다.

 nothingfn () {}; // 빈 함수, 작업 없음 // ... 기타 코드 ...

하위 요소의 이중 클릭 이벤트에 nothingFn 클릭하지 않으려면 두 번 클릭 이벤트가 거품이 켜지지 않도록하여 부모 요소의 changeFullScreen 기능을 트리거하지 않습니다.

방법 2 : 이벤트 대상 요소를 기반으로 한 판단

이벤트 버블 메커니즘을 사용하여 event.target 확인하여 이중 클릭 이벤트의 트리거 소스를 결정하십시오. 상위 요소 인 경우 changeFullScreen 이 실행됩니다. 자식 요소라면 무시됩니다. 이 방법은 이벤트 소스를 구별 할 수 있도록 이중 클릭 이벤트의 처리 로직을 수정해야합니다.

위의 두 가지 방법을 통해 HILD Element Click 이벤트는 상위 요소 더블 클릭 이벤트를 트리거하여 이벤트 충돌을 피할 수 없습니다. 선택할 방법은 특정 프로젝트 요구 사항 및 코드 구조에 따라 다릅니다.

위 내용은 자식 요소의 클릭 이벤트가 부모 요소의 두 번 클릭 이벤트를 트리거하지 않도록하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!