[Svelte] 스벨트에서의 event capture와 bubbling

아래코드는 버튼 click 시 stopPropagation에 의해 button 이벤트만 실행된다.

<script>
    function handleClick(e) {
        console.log(e);
    }
</script>

<div id="test" on:click={e => handleClick('div')}>
    <button on:click|stopPropagation={e => handleClick('button')}>
        Click me
    </button> 
</div>

<style>
    #test {
        background-color : black;
    }
</style>

버튼을 눌렀을 때, 버튼 event 가 아닌, div의 click 이벤트가 동작하게 처리하려면 아래와 같이 수정해야 한다.

<script>
    function handleClick(e) {
        console.log(e);
    }
</script>

<div id="test" on:click|capture|stopPropagation={e => handleClick('div')}>
    <button on:click|capture={e => handleClick('button')}>
        Click me
    </button> 
</div>

<style>
    #test {
        background-color : black;
    }
</style>

 

링크
Events / Event modifiers • Svelte Tutorial
developer.mozilla.org / 이벤트 버블링과 캡쳐