HTML DOM stopPropagation() 이벤트 메서드는 지정된 요소의 전파를 중지하는 데 사용됩니다. 즉, 부모 요소를 클릭해도 자식에게 전파되지 않고 자식 요소를 클릭해도 stopPropagtion() 메서드를 사용하여 부모에게 전파되지 않습니다. 이벤트 전파를 이벤트 버블링이라고도 합니다.
구문
다음은 stopPropagation() 이벤트 메서드의 구문입니다. -
event.stopPropagation()
예시
stopPropagation() 이벤트 메서드의 예를 살펴보겠습니다. -
<!DOCTYPE html>
<html>
<head>
<style>
#DIV_1 {
background: lightpink;
width:130px;
height:130px;
margin-left:40%;
text-align:center;
}
#IMG_1 {
width:100px;
height:100px;
position:relative;
left:5px;
}
</style>
</head>
<body>
<h1>stopPropagation() method example</h1>
<div id="DIV_1" onclick="OuterDiv()">
DIV ELEMENT
<img onclick="InnerImg(event)" id="IMG_1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
</div>
Stop propagation:
<input type="checkbox" id="check">
<script>
function InnerImg(event) {
confirm("Inner Image is clicked");
if (document.getElementById("check").checked) {
event.stopPropagation();
}
}
function OuterDiv() {
confirm("Outer div is clicked");
}
</script>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
전파 정지 방법을 먼저 클릭하지 않고 div 요소 내부의 이미지 요소를 클릭하면 -
위의 "확인"을 클릭하면 -
전파 중지 확인란을 선택한 다음 내부 이미지를 클릭하면 -
