javascript - 如何检测超出一定范围的散焦？

Question

解决方案:

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;
  }

})

我有一个 input 文本，当它获得焦点时，下面会出现一个按钮。

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

设置按钮在不聚焦后消失是我的第一次尝试；在无法点击它之后，我决定使用 timeout，它看起来像:

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";
})

Answer 1

在您的按钮事件处理程序中，强制将焦点放在输入上。

例如:

$("#button").on("click", () => {
 //code
 $("#input").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);
});