HTML의 하위 요소에서 상위 요소로 이벤트 전파를 방지하는 방법은 무엇입니까?

인라인 Onclick 이벤트 리스너를 사용하여 이벤트 전파 방지

HTML에서 인라인 이벤트 리스너를 사용하면 요소 태그 내에 이벤트 처리를 직접 추가할 수 있습니다. 그러나 때로는 하위 요소의 이벤트가 상위 요소의 이벤트를 트리거해서는 안 되는 상황이 발생합니다.

문제:

다음 코드를 고려하세요.

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

이 스니펫에서는 사용자가 범위를 클릭하면 범위의 클릭 이벤트와 div의 클릭 이벤트가 모두 발생합니다.

해결책:

스팬에서 div로의 이벤트 전파를 중지하려면 event.stopPropagation() 메서드를 사용할 수 있습니다.

<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

event.stopPropagation()을 호출하여 이벤트가 상위 요소로 버블링되는 것을 효과적으로 방지합니다. 클릭 이벤트를 범위로 분리합니다.

IE의 대안:

event.stopPropagation()을 지원하지 않는 이전 버전의 Internet Explorer의 경우 다음을 수행할 수 있습니다. window.event.cancelBubble = true를 사용하세요:

<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>

이 방법은 다음과 같이 동일한 결과를 얻습니다. 이벤트 전파를 명시적으로 취소합니다.

위 내용은 HTML의 하위 요소에서 상위 요소로 이벤트 전파를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!