하위 앵커를 클릭할 때 상위 클릭 이벤트가 발생하는 것을 방지하는 방법은 무엇입니까?

하위 앵커 클릭으로 인한 상위 이벤트 트리거 방지

웹 프로그래밍에서는 클릭 가능한 다른 요소 내에 클릭 가능한 요소를 중첩시켜야 하는 경우가 많습니다. 그러나 클릭 가능한 상위 요소 내에서 앵커 요소('a' 태그)를 클릭하면 두 클릭 이벤트가 모두 실행되어 원치 않는 동작이 발생할 수 있습니다.

문제 정의:

목표는 앵커 하위 항목을 클릭할 때 상위 요소의 onclick 이벤트가 트리거되는 것을 방지하는 것입니다. 이렇게 하면 앵커가 의도한 작업만 수행됩니다.

해결 방법 1: 이벤트 출처 확인

jQuery는 이벤트 출처에 대한 정보가 포함된 'eventargs' 개체를 제공합니다. 상위 요소의 onclick 핸들러 내에서 이벤트 인수를 확인하면 클릭이 앵커에서 발생했는지 확인할 수 있습니다.

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

이 코드에서는 이벤트 대상이 'div' 요소인지 확인합니다. 그렇다면 상위 작업을 트리거합니다(특정 URL로 리디렉션).

해결책 2: 이벤트 버블링 중지

이벤트 버블링은 다음을 통해 이벤트가 전파되는 것을 의미합니다. DOM 트리. 앵커에 클릭 핸들러를 추가하고 그 안에서 'e.stopPropagation()'을 호출하면 이벤트가 상위 요소로 버블링되는 것을 방지할 수 있습니다.

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

이 접근 방식은 이벤트가 계속되는 것을 즉시 중지합니다. 앵커의 작업만 실행되도록 DOM에서 위쪽으로 이동합니다.

위 내용은 하위 앵커를 클릭할 때 상위 클릭 이벤트가 발생하는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!