중첩된 DOM 객체에서 하위 이벤트가 트리거될 때 상위 이벤트 핸들러가 실행되는 것을 방지하는 방법은 무엇입니까?
- Susan Sarandon원래의
- 2024-11-24 08:45:11225검색
중첩 DOM 객체에서 이벤트 진행 유지
이벤트 핸들러가 여러 수준에서 정의되는 중첩 DOM 구조에서는 하위 이벤트가 트리거될 때 상위 이벤트 핸들러의 실행. 다음 예를 고려해보세요.
<div><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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.