하위 요소를 클릭할 때 상위 클릭 이벤트가 발생하지 않도록 하려면 어떻게 해야 합니까?

중첩 클릭 이벤트의 이벤트 버블링 이해

둘 다 클릭 이벤트 리스너가 있는 상위 요소 내의 요소를 클릭하면 두 이벤트가 모두 트리거될 수 있습니다. 이벤트 버블링이라고 알려진 이 동작은 상위 요소의 이벤트가 동시에 실행되는 것을 원하지 않을 때 바람직하지 않은 결과를 초래할 수 있습니다.

특정 시나리오에서는 앵커가 포함된 클릭 가능한 div에서 이 문제가 발생합니다. 태그. 이 문제를 해결하려면 두 가지 접근 방식을 살펴보겠습니다.

1. 발생 이벤트의 대상 식별

앵커를 클릭할 때 상위 div의 클릭 이벤트가 실행되지 않도록 하려면 이벤트 자체의 출처를 확인하세요. jQuery는 이벤트 핸들러에 전달된 이벤트 인수 내에서 e.target 속성을 제공합니다.

$("#clickable").click(function(e) {
    var senderElement = e.target;
    if($(senderElement).is("div")) {
        window.location = url;
        return true;
    }
});

이 접근 방식에서는 이벤트 선택기를 기반으로 div 요소에서 이벤트가 발생했는지 확인합니다. div가 아닐 경우 window.location 변경 이벤트가 발생하지 않습니다.

2. 이벤트 전파 중지

또는 클릭 이벤트 핸들러 내에서 e.stopPropagation() 메서드를 사용하여 앵커에 대한 클릭 이벤트 버블링을 방지할 수 있습니다.

$("#clickable a").click(function(e) {
    e.stopPropagation();
    // Do something specific to the anchor
});

이 접근 방식을 사용하면 앵커의 클릭 이벤트는 상위 요소에 이벤트를 전파하지 않고 자체 로직을 실행하여 div의 클릭 이벤트가 실행되는 것을 효과적으로 방지합니다.

위 내용은 하위 요소를 클릭할 때 상위 클릭 이벤트가 발생하지 않도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!