Javascript 如何检测特定范围以外的非聚焦？

解决方案：

let focused = false;
document.getElementById('input-comment').addEventListener("focus", ()=>{
  document.getElementById('comment-id').style.display="block";
})

document.getElementById('comment-id').addEventListener("mousedown", ()=>{
  $("#input-comment").focus();
  focused = true;
})

document.getElementById('input-comment').addEventListener("focusout", ()=>{
  if(!focused){
    document.getElementById('comment-id').style.display="none";
  }
  else{
    focused = false;
  }

})

我有一个

文本输入

，当它聚焦时，下面会出现一个按钮

此外，我希望它在未聚焦时消失，但仍然能够单击下面的按钮而不消失，这意味着我希望能够单击按钮而不触发未聚焦事件，但在其他任何地方触发它

我第一次尝试将按钮设置为在未聚焦后消失；在无法单击它之后，我决定使用一个

超时

，whcih看起来像：

document.getElementById('input-comment').addEventListener("focusout", ()=>{
 setTimeout(()=>document.getElementById('comment-id').style.display="none", 100);
})

这样做的问题是，当单击其他元素时，输入不会在未聚焦后立即消失

然后我试着

let clicked = false;
document.body.addEventListener("click", ()=>{
  document.getElementById('comment-id').addEventListener("click", ()=>{
    document.getElementById('comment-id').style.display="block";
    clicked = true;
  })
  setTimeout(()=>{
    if(!clicked){
      document.getElementById('input-comment').addEventListener("focusout", ()=>{
        document.getElementById('comment-id').style.display="none";
      })
    }
  }, 500);
})

我希望如果我先单击按钮，它会阻止onfocus事件，但是如果我在未聚焦时单击按钮，它不会隐藏；如果我单击了其他元素，我将无法单击该按钮

编辑：当前代码

document.getElementById('input-comment').addEventListener("focus", ()=>{
  document.getElementById('comment-id').style.display="block";
})

document.getElementById('comment-id').addEventListener("click", ()=>{
  $("#input-comment").focus();
})

document.getElementById('input-comment').addEventListener("focusout", ()=>{
  document.getElementById('comment-id').style.display="none";
})

---

在按钮事件处理程序中，强制关注输入

例如：

$（“#按钮”）。在（“单击”，（）=>{
//代码
$（“#输入”）.focus（）；
});

我建议您在输入中为

onfocus

添加一个侦听器，这样您就可以清除

timeout

document.getElementById（'input-comment'）.addEventListener（“focusout”，（）=>{
hideButtonTimeout=setTimeout（（）=>document.getElementById（'comment-id'）.style.display=“none”，100）；
});
document.getElementById（'input-comment'）。addEventListener（“onfocus”，（）=>{
clearInterval（hideButtonTimeout）；
});

我按照您的代码编辑了我的问题，因为它仍然不起作用；当我点击按钮时，它仍然会隐藏它；也许我做错了什么？你删除了超时逻辑，试试这个吧？如果没有超时，这将立即触发，因此它将被隐藏。使用timeout，您可以给代码一些执行时间，并将焦点带回编辑器，这将触发事件，该事件将清除间隔并避免隐藏元素