js) js에서 e.target을 통해 특정 영역 밖을 클릭했을때 발생하는 이벤트

Question

안녕하세요 js로 웹 개발을 진행하면서 막히는 부분이 있습니다.combo box를 커스텀으로 만들었습니다. css를 넣어야해서요이슈는 콤보박스의 리스트가 활성화된 상태에서 콤보박스 div 영역 밖을 클릭하게 되면 리스트가 다시 비활성화 되게 까지는 코딩을 하였습니다.

이름
나이
날짜

하지만 동일 html 페이지 내에서 여러개의 combo box가 존재하게 되면서 문제가 발생했습니다.한 콤보박스에서만 코드가 작동하고 다른 콤보박스에서는 코드가 제대로 작동하지를 않습니다.콤보박스에 독립적으로 이벤트가 발생할 수 있도록 콤보박스의 div마다 onclick 속성을 통해 클릭 이벤트가 발생할 수 있도록 하였습니다.그리고 window에 addEventListener를 통해서 click 이벤트가 발생했을때, 콤보 리스트 ul이 활성화 되어 있고, e.target이 button이 아닐때, e.target이 ul의 li도 아니라면 ul을 다시 비활성화 하도록 하였습니다. 이렇게 작성한 코드가 첫번째 combo box에서만 작동합니다. ㅠfunction select_func(e) { $(e).children('ul').toggleClass('active') }window.addEventListener('click', function (e) { console.log('1') if ($('.selectBox_list').is('.active')) { console.log(e.target) console.log('11') if (e.target != document.querySelector('.selectBox_btn')) { console.log(e.target) console.log('111') if (e.target != document.querySelector('.selectBox_list li')) { console.log(e.target) console.log('1111') $('.selectBox_list').removeClass('active') } } } }) console을 찍어서 나오는 것을 확인해보면, 첫번째 콤보박스만 최초 클릭시 1과 11까지 가고 여기서 범위 밖을 클릭하면 마지막 1111까지 가게 됩니다. 하지만 다른 콤보박스들을 최초로 클릭을 하게되면, 1, 11, 111, 1111 한번에 끝까지 찍혀버립니다. ㅠㅠ도대체 첫번재 콤보박스는 target이 queryselector는 똑깥다고 인식을 하면서다른 콤보박스는 target은 queryselector와 다르다고 아니라고 인식을 하는 것일까요?? 이 불쌍한;;;; 암 것도 모르는;;;; 불쌍한.... 놈을 좀 도와주십쇼 ㅠㅠ EX) aaa셀렉트를 클릭했을 때 console.log aaa2셀렉트를 클릭했을 때 console.log

refresh6724 · Answer

전체코드를 잘 모르겠지만 class를 selector로 사용하면 배열[ ] 로 돌아오지 않나요?첫번째 selectBox만 선택되고 있는게 아닌지 확인 해보세요. 제가 그런 실수를 한적이 있어서...

Haileyang · Answer

Queryselectorall 을 쓰셔도 안될까요? 콤보박스가 뭔지.. 원하시는 것이 파악이 안되서 ㅎㅎ

johnnyK____ · Answer

combo box라고 한 것은 ㅠㅠ > html 테그를 사용하면 기본으로 작동되는데 ㅠㅠ 저는 option을 css로 조정했어야 했어서 따로 select 테그를 사용하지 않고 직접 만들었거든요 ㅠㅠ 제가 본문에 작성한데로 동작하면 첫번째 aaa 셀렉트에서는 작동을하는데 aaa2 aaa3에서는 작동이 안됩니다. ㅠㅠ

johnnyK____ · Answer

refresh6724 감사합니다. ㅠㅠ 우선 한번 해보겠습니다.

js) js에서 e.target을 통해 특정 영역 밖을 클릭했을때 발생하는 이벤트

4개의 답변

#div 목록