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

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

1 个答案: