on:click|self 모달창 간단하게 닫기

모달창을 뛰우면 반투명 검정 화면을 뛰웁니다.

그리고 반투명 배경화면을 클릭하면 모달이 닫히게 하는 경우가 있습니다.

이때 배경화면 클릭 이벤트를 넣으면

내용 부분을 클릭하면 배경도 같이 클릭되게 됩니다.

부모레이어 이벤트가 자식레이어에도 적용?

부모레이어 범위내 모든 이벤트를 인식하는 것이겠죠!

일반 자바스크립트는

이벤트를 후킹하여 배경화면 클릭을 무력화 시키기위한 스크립트를 넣습니다.

이렇게 ...

const closeBg = (e) => {

        if(e.target.classList[0] === 'modal-container'){

            modalActive = false;

            

        }

    }

그런데 스벨트에서는 쉽게 나만 클릭해라라고 강제할 수 있습니다.

on:click|self="{()=>{modalActive =!modalActive}}"

on:click 뒤에 self 를 | 앞에 붙여서 넣어주면

자식레이어 클릭을 방지해줍니다.

간단하죠 쉽습니다.