• 기본적으로 jQuery 마우스 이벤트를 등록하면 자식 엘리먼트에게 이벤트를 전파한다.
• 이벤트가 전파된 자식 엘리먼트에서 이벤트를 등록하여 실행하면 부모 엘리먼트의 이벤트가 실행되는 현상이 일어난다.
• 이것을 막고, 자식이벤트만 실행하게 하려면 event.stopPropagation() 함수를 사용하면 더이상 부모이벤트의 함수는 실행되지 않는다.

html

<div id="btn_grp">
    <span href="#" class="btn" rel="0">
        Button #0
        <a class="clos">Close</a>
    </span>

    <span href="#" class="btn" rel="1">
        Button #1
        <a class="clos">Close</a>
    </span>
</div>

javascript

$('#btn_grp .btn').on('click', function(){
    console.log('open' + $(this).attr('rel'));
});

$('#btn_grp .clos').on('click', function(e){
    e.stopPropagation();
    console.log('close : ' + $(this).parent().attr('rel'));
});