SUNKYUN.COM

[jQuery] 자식이벤트 실행할때 부모이벤트 실행 무시하기

기본적으로 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'));

});

출처: https://note.redgoose.me/article/670