0

const selectBtn = document.querySelector(".btn-select");
const langUl = document.querySelector(".list-member");
const options = document.querySelectorAll(".option"); // 모든 옵션을 다 찾기

// 토글 버튼이 클릭되면 메뉴를 보여줌
selectBtn.addEventListener("click", () => {
  langUl.classList.toggle("show");
});

/*
      // 토글버튼이 blur 되었을 때 show라는 클래스를 remove
      selectBtn.addEventListener("blur", () => {
        langUl.classList.remove("show");
      });
*/

// 옵션 클릭했을 때 select-button에 글자 바뀌게 하기
options.forEach((item) => {
  item.addEventListener("click", (e) => {
    const value = e.currentTarget.textContent.trim();
    selectBtn.textContent = value;
    langUl.classList.remove('show')
  });
});
/* 직접 셀렉트 박스 만들기 */

h2 {
  margin: 30px;
}

.cont-select {
  margin: 200px auto;
  position: relative;
  width: 200px;
}

.btn-select {
  width: 100%;
  padding: 13px 14px;
  color: #000;
  font-size: 12px;
  line-height: 14px;
  text-align: left;
  border: 1px solid #c4c4c4;
  box-sizing: border-box;
  border-radius: 10px;
  cursor: pointer;
  background: url("images/icon-Triangle-down.png") right 13px center no-repeat;
  /* 말줄임 추가 */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.btn-select:focus {
  outline: 3px solid #f8e4ff;
}

.list-member {
  display: none;
  width: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 51px;
  background: #fff;
  border: 1px solid #c4c4c4;
  box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.show {
  display: block;
}

.btn-select.on {
  background: url("images/icon-Triangle-up.png") right 13px center no-repeat;
}

.btn-select.on+.list-member {
  display: block;
}

.list-member li {
  height: 40px;
  padding: 5px 18px;
}

.list-member li button {
  display: block;
  height: 30px;
  width: 100%;
  border: none;
  background-color: #fff;
  border-radius: 8px;
  cursor: pointer;
  /* 말줄임 추가 */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.list-member li button:focus,
.list-member li button:hover {
  background-color: #f8e4ff;
}
<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="reset.css" />
</head>

<body>
  <h2>셀렉트 박스 만들기</h2>
  <article class="cont-select">
    <button class="btn-select">나의 최애 프로그래밍 언어</button>
    <ul class="list-member">
      <li><button type="button" class="option">Python</button></li>
      <li><button type="button" class="option">Java</button></li>
      <li><button type="button" class="option">JavaScript</button></li>
      <li><button type="button" class="option">C#</button></li>
      <li><button type="button" class="option">C/C++</button></li>
    </ul>
  </article>

</body>

</html>
selectBtn.addEventListener("blur", () => {
        langUl.classList.remove("show");
      });

If I apply the blur event,

 options.forEach((item) => {
        item.addEventListener("click", (e) => {
          const value = e.currentTarget.textContent.trim(); 
          selectBtn.textContent = value;
          langUl.classList.remove('show')
        });
      });

This event code is not applicable in your browser.

for example, if you click the button with 'JavaScript' as text, you can see that the text of the btn-select does not change to 'JavaScript' and the blur event is applied.

What should I do if I want to operate this event using the blur event?

Barmar
  • 741,623
  • 53
  • 500
  • 612
채지훈
  • 1
  • 1
  • I'm not sure why, but the click listener on the options isn't running when you click on them. – Barmar May 13 '22 at 05:33

1 Answers1

0

The reason is explained here. blur triggers on mousedown, click - on mouseup.

A possible solution would be using the mousedown instead of click.
The downside is that it will work, obviously, on mouse down, not on mouse up.

const selectBtn = document.querySelector(".btn-select");
const langUl = document.querySelector(".list-member");
const options = document.querySelectorAll(".option"); // 모든 옵션을 다 찾기

// 토글 버튼이 클릭되면 메뉴를 보여줌
selectBtn.addEventListener("mousedown", () => {
  langUl.classList.toggle("show");
});

// 토글버튼이 blur 되었을 때 show라는 클래스를 remove
selectBtn.addEventListener("blur", () => {
  langUl.classList.remove("show");
});

// 옵션 클릭했을 때 select-button에 글자 바뀌게 하기
langUl.addEventListener("mousedown", (e) => {
  if (e.target.tagName === 'BUTTON') {
    selectBtn.textContent = e.target.textContent.trim();
  }
});

Note: I also removed event listeners on every button.
Instead only put only one listener on UL.

Nikita Skrebets
  • 1,518
  • 2
  • 13
  • 19