SUNKYUN.COM

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

event.preventDefault()

현재 이베트를 중단

event.stopPropagation()

현재 이벤트가 상위로 전파되지 않도록 중단

event.stopImmediatePropagation()

현재 이벤트가 상위뿐만 아니라 현재 레벨에 걸린 다른 이벤트도 동장하지 않도록 중단

return false

JQuery를 사용할 때는 event.preventDefault()와 같음

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