중첩된 DOM 객체에서 하위 이벤트가 트리거될 때 상위 이벤트 핸들러가 실행되는 것을 방지하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-11-24 08:45:11

원래의

294명이 탐색했습니다.

<div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

이 구조에서 클릭이 모든 div 요소에서 "func" 함수를 호출합니다. 그러나 문제가 있습니다. "b" 또는 "c"를 클릭하면 클릭한 div와 해당 상위 div인 "a" 모두에 대해 "func" 기능이 트리거됩니다.

해결책: 이벤트 전파 제어

jQuery는 이벤트가 DOM 트리 위로 전파되는 것을 방지하는 방법을 제공합니다. 이벤트 핸들러를 정의하기 전에 다음 코드를 추가하면

$('#a').add('#b').click(function(event) {
    event.stopPropagation();
});

"b" 또는 "c"를 클릭해도 이벤트가 상위 "a"로 전파되는 것을 방지할 수 있습니다. 이렇게 하면 클릭한 하위 div의 함수만 실행됩니다.

이벤트 전파를 제어하면 중첩된 DOM 구조에서 원하는 이벤트 흐름을 유지하고 의도하지 않은 함수 실행을 방지할 수 있습니다.

위 내용은 중첩된 DOM 객체에서 하위 이벤트가 트리거될 때 상위 이벤트 핸들러가 실행되는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!