'How do I solve the problem that other events cannot be applied when using blur in JavaScript event?

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?

Solution 1:^[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nikita Skrebets

'How do I solve the problem that other events cannot be applied when using blur in JavaScript event?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]