[Event] JQ - event.stopPropagation() 메서드 ★★★ - 이벤트 확산(= 버블링)을 방지. (= 이벤트.스탑프라퍼게이션 메서드)

1. event.stopPropagation() 예제 - 부모 요소로 이벤트 확산 방지
2. event.stopPropagation() 정의
3. event.stopPropagation() 구문

event.stopPropagation() 예제 - 부모 요소로 이벤트 확산 방지

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("span").click(function(event){

    event.stopPropagation();

    alert("span 요소 클릭됨");

  });

  $("p").click(function(event){

    alert("p 요소 클릭됨.");

  });

  $("div").click(function(){

    alert("div 요소 클릭됨.");

  });

});

</script>

<style>

div {height:100px;width:500px;padding:10px;border:1px solid blue;background-color:lightblue;}

div p {background-color:pink}

div p span {background-color:orange}

</style>

<div>div 요소

    <p>div > p 요소 <br><span>div>p>span 요소</span></p>

</div>

결과보기

event.stopPropagation() 정의

 

부모 요소로 이벤트 확산 (= 이벤트 버블링 : event bubbling) 방지해, 부모 요소에 대해 이벤트 발생을 방지함.

 

---

cf.

event.isPropagationStopped() 메서드 - event.stopPropagation() 메서드가 이벤트를 위해 호출되었는지 확인.

 

event.stopPropagation() 구문

 

event.stopPropagation()

 

---

[매개변수]

 

event

필수. 이벤트에 바인딩 된 함수에서 가져옴.