자바스크립트 이벤트 중단 stopImmediatepropagation

event.stopImmediatepropagation() 와 event.preventDefault()

by hidechen

HTML

<div id="div_">
    DIV영역
    <p id="p_">
        P영역
        <span id="span_">
          <a id="a_" href="http://www.google.co.kr" target="_blank">A영역 구글 링크</a>
        </span>
    </p>
</div>

<section id="console"><br></section>

CSS

div {
    background-color: #e1e1e1;
    padding: 20px;
    display: block;
}

p {
    background-color: #a1a1a1;
    padding: 20px;
    display: block;
}

span {
    background-color: #c1c1c1;
    padding: 20px;
    display: block;
}

section {
    background-color: #1144AA;
    padding: 0 10px 30px 20px;
    margin: 50px 0 0 0;
    color:white
}

section:before {
    background-color: #114477;
    padding: 5px;
    margin: 0 0 0 -20px;
    border-bottom: 2px solid #002244;
    border-bottom-right-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    content:"결과 콘솔";
}

JavaScript

//DIV 영역에 클릭 이벤트 설정
$("#div_").on("click",function(event){
    $("#console").append("<br>DIV 클릭");
});

//P 영역에 클릭 이벤트 설정
$("#p_").on("click",function(event){
    $("#console").append("<br>P 클릭");
});

//SPAN 영역에 첫번째 클릭 이벤트 설정
$("#span_").on("click",function(event){
    $("#console").append("<br>SPAN 클릭1");
    
    //상위 뿐 아니라 같은 레벨로도 이벤트가 전파되지 않도록 중단한다.
    event.stopImmediatePropagation();
});

//A 영역에 클릭 이벤트 설정
$("#a_").on("click",function(event){
    $("#console").append("<br>A 클릭");
    
    //이벤트의 기본 동작을 중단한다.
    event.preventDefault();
});