onBlur 事件阻止 onClick 事件

Question

我有一个带有 onfocus 和 onblur 事件的输入文本框。文本框下面是一个div，它被with display隐藏了：none.

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

之外的每个其他节点上添加 onfocus

除此之外你还有什么想法吗？感谢您的帮助。

延斯

Answer 1

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

Answer 2

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

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

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

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

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

Answer 3

onmousedown 在 onblur

之前活跃

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

onBlur 事件阻止 onClick 事件

onBlur event prevents onClick event

javascript

onfocus

onblur