나 자신이외에 클릭 하면 .. ! (feat. 셀렉트 박스 커스텀 연장선)

기존에 포스팅되었던 글 중  select 태그 커스텀 하기, 혹은 직접 만들기 (feat. javascript)

자신을 제외한 다른 부분을 클릭할 때 닫히게 하려면 어떻게 해야 하는지 질문을 주셔서 따로 다루면 좋을 것 같아 새로 포스팅을 해봅니다. 

 

꼭 SelectBox에만 사용되는게 아니니 알아두면 좋을 것 같습니다. 

 

 

💜 참고로 여기서 지칭하는 selectbox는 html 태그가 아니라 div로 커스터마이징 된 selectbox를 의미합니다. 

💜 기존 소스를 보시면 이해하기 더 편하실 꺼예요.😉

 

원리는 window 자체에 addeventListener를 등록하고 클릭된 event 값을 받아서 비교를 합니다. 

그리고 클릭된 event.target이 Select 자신인지 아닌지 비교한 뒤 본인이 아니면 Select를 닫아주면 됩니다. 

 

1. window 에 addeventListener 걸기

window.addEventListener('click', e => 비교해서닫을함수(e))

 

2. 비교해서 Select를 닫아주는 함수 만들기

e.target 에서 class값을 가져와 label이나 optionItem 을 클릭하는경우는 닫히면 안되니까 이 두가지가 아닌 경우에만 무조건 Select를 닫아주면 됩니다. 

const handleClose = e => {
    // select 가 아닌경우 닫기 
    if(!e.target.classList.contains('label') && !e.target.classList.contains('optionItem')) {
        label.forEach(function(lb){
            lb.parentNode.classList.remove('active')
        })
    } 
}

 

 

PLUS. 멀티 selectbox에서 나 자신이 아닌 경우에 닫기 

추가적으로 selectbox가 여러개인경우의 소스 코드도 추가됬었는데, 

이때 selecbox를 열어놓은 상태로 다른 selectbox를 클릭했을때 다른 열려 있는 selectbox를 닫아주는 코드를 더 추가해보았습니다. label을 forEach로 돌려 클릭된 label이 아니면 부모를 찾아 active 클래스를 제거합니다. 

const clickLabel = (lb, optionItems) => {

    // ****************** 추가된 부분 START
    // 내가 아닌 다른 select 닫기 
    label.forEach(function(itemLb){
        if(lb !== itemLb) {
            itemLb.parentNode.classList.remove('active')
        }
    })
    // ****************** 추가된 부분 END

    if(lb.parentNode.classList.contains('active')) {
        lb.parentNode.classList.remove('active');
        optionItems.forEach((opt) => {
            opt.removeEventListener('click', () => {
                handleSelect(lb, opt)
            })
        })
    } else {
        lb.parentNode.classList.add('active');
        optionItems.forEach((opt) => {
            opt.addEventListener('click', () => {
                handleSelect(lb, opt)
            })
        })
    }
}

 

 

---

최종코드