목차
- stopPropagation() 예제 - 이벤트 확산 방지
- stopPropagation() 정의
stopPropagation() 예제 - 이벤트 확산 방지
<style>
div {
padding: 50px;
background-color: rgba(255, 0, 0, 0.2);
text-align: center;
cursor: pointer;
}
</style>
<div onclick="homzzang2()">Hz 2
<div onclick="homzzang1(event)">Hz 1</div>
</div>
확산방지: <input type="checkbox" id="check">
<script>
function homzzang1(event) {
alert("Hz 1");
if (document.getElementById("check").checked) {
event.stopPropagation();
}
}
function homzzang2() {
alert("Hz 2");
}
</script>
결과보기
※ hz1을 그냥 클릭했을 때와 확산방지 체크를 하고 클릭했을 때 효과 비교.
stopPropagation() 정의
부모 요소나 자식 요소로 이벤트가 전파(= 확산)되는 것을 방지.