由于CSS动画，单击复选框上的事件未处理

Question

我有一个输入和一个复选框，当输入被聚焦时，它会显示一些信息。

问题是：当我点击复选框显示这些信息时，它会隐藏信息（因为我的输入不再聚焦），但不选中复选框。

这是一个重现这种行为的working plunker。

有没有办法在这种情况下检查checkbox？

编辑：

我认为问题是因为输入松散了事件mousedown并且事件mouseup（或者可能是click）上的复选框被检查所以当mouseup事件被触发时输入已经失去了焦点所以隐藏它下面的消息然后复选框向上移动。因此，当mouseup事件被触发时，复选框上的光标不再存在，这就是未选中复选框的原因。

Answer 1

纯CSS中没有任何东西。您需要在JS上绑定焦点事件。

像这样的东西：

var input = document.querySelector('#input');

input.addEventListener('focus', function() {
  this.classList.add('focus');
});

然后将您的CSS从:focus更改为.focus

Answer 2

我的解决方案附在此处。这是一种简单的方法。我已经添加了JQuery代码。您可以尝试此代码。我用JSFiddle编写了这段代码。链接如下：

[https://jsfiddle.net/679g9p6p/1/][1]

如果要在从文本框中向外聚焦时隐藏信息，则可以尝试以下给出的代码：

[https://jsfiddle.net/xxsL2e03/100/][2]