중첩 DOM 객체에서 이벤트 진행 유지
이벤트 핸들러가 여러 수준에서 정의되는 중첩 DOM 구조에서는 하위 이벤트가 트리거될 때 상위 이벤트 핸들러의 실행. 다음 예를 고려해보세요.
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
