我试图用变量打开/关闭弹出窗口， 它显示输入字段何时获得焦点，反之亦然。 但会有一个图标允许用户点击它， 图标可以切换弹出窗口的显示。
这是代码片段：
// Get references to the input field and the popup
const inputField = document.getElementById("inputField");
const popup = document.getElementById("popup");
const toggleIcon = document.getElementById("toggleIcon");
// Variable to track the visibility state of the popup
let isPopupVisible = false;
// Function to show the popup
function showPopup() {
console.log("showing");
popup.style.display = "block";
isPopupVisible = true;
}
// Function to hide the popup
function hidePopup() {
console.log("hiding");
popup.style.display = "none";
isPopupVisible = false;
}
// Function to toggle the visibility of the popup
function togglePopup() {
console.log("toggle", isPopupVisible ? "true" : "false");
if (isPopupVisible) {
hidePopup();
} else {
showPopup();
}
}
// Event handler for when the input field is focused
inputField.addEventListener("focus", function () {
if (!isPopupVisible) {
showPopup();
}
});
// Event handler for when the input field is blurred
inputField.addEventListener("blur", function () {
hidePopup();
});
// Event handler for when the toggle icon is clicked
toggleIcon.addEventListener("click", function () {
togglePopup();
});<html>
<head>
<title>Popup Example</title>
<style>
.popup {
display: none;
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<input type="text" id="inputField" placeholder="Enter text">
<span id="toggleIcon">👁</span>
<div id="popup" class="popup">
This is the popup content.
</div>
<script>
// JavaScript code goes here
</script>
</body>
</html>但是通过特定的程序，发现了一个意想不到的显示弹出窗口：
1. click the icon to show the popup
2. click the input field to focus on it, the popup still showing
3. click the icon
Expected: the popup should be hidden
Result: the popup hides and shows back
并且通过控制台日志，我发现输入的 onblur 事件是在调用图标切换函数之前触发的。
"toggle: isPopupVisible=false"
"showing"
"hiding"
"toggle: isPopupVisible=false"
"showing"
那么对于这种情况，我该如何更新我的代码才能达到效果？
我不能只是用一些东西隐藏弹出窗口
display: none;问题的原因是，当您单击带有从输入的
focusblur要解决此问题，您可以监听 input
外部的点击，而不是
blurinputicon另请注意，用于存储弹出窗口可见状态的变量是多余的，会导致不必要的复杂性。 DOM 已经保存了状态，因此可以将其用作唯一的事实来源。事实上，您可以通过使用带有
display: block话虽如此，这是进行了上述更改的工作版本：
const inputField = document.getElementById("inputField");
const popup = document.getElementById("popup");
const toggleIcon = document.getElementById("toggleIcon");
const showPopup = () => popup.classList.add('show');
const hidePopup = () => popup.classList.remove('show');
const togglePopup = () => popup.classList.toggle('show');
// Event handler for when the input field is focused
inputField.addEventListener("focus", function() {
showPopup();
});
// Event handler for when a click occurs outside of an element which affects the popup
document.addEventListener("click", function(e) {
if (e.target != inputField && e.target != toggleIcon) {
hidePopup();
}
});
// Event handler for when the toggle icon is clicked
toggleIcon.addEventListener("click", function(e) {
togglePopup();
});.popup {
display: none;
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
}
.popup.show {
display: block;
}<input type="text" id="inputField" placeholder="Enter text">
<span id="toggleIcon">👁</span>
<div id="popup" class="popup">
This is the popup content.
</div>