Question

我有一个input type=text控件T，当聚焦时会运行一些JavaScript来显示div UI元素E。

当T模糊时，E会被onblur回调隐藏。

但是当用户点击E时，T当然是模糊的，但在这种情况下我不想隐藏E。

如何区分正常模糊和模糊之间的onblur T回调到控件内某处？

我尝试了document.activeElement，但这会返回body元素，这对我没用。

最小例子：

https://jsfiddle.net/1w8hr5jr/

修改

是否因为只有某些类型的DOM节点可以获得焦点，focus和blur对我的需求不够强大？

Answer 1

我的建议，如我的评论中所述，是使用点击事件而非模糊和焦点

HTML

<div id="container">
  <input type="text" id="foo"></input>
  <div id="bar">
    hello
  </div>
</div>

的javascript

var container = document.getElementById('container');
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');

function onFocus() {
  bar.style.display = 'block';
}

function onClick(evt) {
  if (evt.target === foo) {
     bar.style.display = 'block';
  } else if (evt.target !== bar) {
     bar.style.display = 'none';
  }
}

container.addEventListener('click', onClick);

https://jsfiddle.net/she5fqmh/2/

我最近遇到了同样的挑战，这是我找到的最好的解决方法

在DOM节点上使用焦点和模糊事件

1 个答案: