이벤트 전파 방지

by niceaji

HTML

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>테스트 문서</title>
</head>
<body>

<div id="wrap">
    <a href="http://www.daum.net" target="_blank" id="btn">button</a>
</div>


</body>
</html>

CSS

div {margin:50px;padding:10px}
#wrap {background-color:#ccc;} 
#btn { border:1px solid black ;background-color:#eee;cursor:pointer}

JavaScript

var wrap = document.querySelectorAll('#wrap')[0];
var btn = document.querySelectorAll('#btn')[0];

btn.addEventListener('click', function(event){

    console.log("btn click!", event.target);

    //event.stopPropagation();
    
   //event.preventDefault();
});

wrap.addEventListener('click', function(event){

    console.log("wrap click!", event.target);
});
document.addEventListener('click', function(event){

    console.log("body click!", event.target);
});