onBlur 事件阻止 onClick 事件答案

【问题标题】：onBlur event prevents onClick eventonBlur 事件阻止 onClick 事件
【发布时间】：2021-02-27 17:40:03
【问题描述】：

我有一个带有 onfocus 和 onblur 事件的输入文本框。文本框下方是一个 div，它被 display: none 隐藏。

如果文本框获得焦点，则应该显示 div，如果模糊，则应该隐藏。这似乎有效。现在，如果我单击 div （或其内容之一）本身，我想让 div 保持可见或对 div 进行任何点击。这行不通。 onBlur 事件可防止 div 上的任何事件。我已经尝试确定单击了哪个新元素，但找不到任何对我有帮助的属性。相关目标为 NULL。目前，我唯一的解决方案似乎是在除 div 及其子节点之外的每个其他节点上添加 onfocus

除此之外，您还有其他想法吗？感谢您的帮助。

詹斯

【问题讨论】：

请阅读How to Ask和minimal reproducible example，然后相应地编辑您的问题。
（我猜测，在将 div 设置回 display:none 之前的短暂超时可能会有所帮助。如果在该时间跨度内发生 div 内的任何点击，那么您必须清除超时。）
你可以做的是：点击事件的 div，添加一个类名“active”并在你的模糊事件上添加 if 语句检查 div 是否有“active”类，如果没有显示：none ，如果是，则显示：阻止。如果你愿意，我可以分享一些代码
@Elnatanvazana 谢谢你的回答。我不能这样做。我的 onblur 防止了 div 的 onclick。如果我点击其他地方但在 div 上，我希望 div 消失。

标签： javascript onblur onfocus

【解决方案1】：

onmousedown 在onblur 之前有效

div.addEventListener('mousedown', function(event) {
   event.preventDefault();
   event.stopPropagation();
});

【讨论】：

工作完美，它比使用计时器更好的解决方案。谢谢

【解决方案2】：

谢谢大家的回答。我会接受 nAviDs 的建议。全局变量看起来有点难看，但它似乎是唯一的方法。

对于那些有同样问题的人：setTimeout 对我来说有点迂腐。我必须以这种方式设置它，否则永远不会使用超时：

var timer = null;
function timer_function(divname)
{
    timer = setTimeout(function(){document.getElementById(divname).style.display='none'}, 200);
}

我必须重新关注文本框，如果超时被清除，否则模糊功能不再起作用。

感谢您的时间和帮助。 :)

【讨论】：

【解决方案3】：

当 onblur 运行时，它会隐藏 div，因此当点击时它不会在 div 上触发，因为 div 是不可见的。所以：

 // use the following global variable
   var mytimer = null;
  
  function newOnBlur()
  {
     mytimer = setTimeout(YourCurrentOnBlurFunctionWihoutParentheses,150);
  }
  
  // clearTimeout in the first line of your click function
  function newOnClick()
  {
     clearTimeout(mytimer);
     //  rest of your click event
  }

【讨论】：