Question

在以下代码中：

＆＃13;

div {padding: 10px; border: 1px solid black}
div.whenFocused {background: yellow}
input {display: block}
* {outline: none}

＆＃13;

<div tabindex=0>
	Text:
	<input>
</div>

＆＃13;

是否有一种简单的方法可以直接或间接通过其中一个孩子检测DIV何时获得或失去焦点？

每当用户与之交互时，我都需要DIV具有黄色背景。 DIV是可聚焦的，因此用户可以通过键盘或鼠标到达那里如果他们使用鼠标，单击DIV内的任何位置都必须触发背景颜色更改。此外，在DIV外部单击必须将背景颜色恢复为正常。

我已经通过几个辅助函数实现了这个行为，并且通过监听不同元素上的几个事件。但对于这么简单的事情，代码太多了。

我确信必须有一种简单明了的方式，但我现在无法想到这一种。
_{（简单来说，我的意思是听几个事件加上几个单行事件处理程序，然后就是这样）}

Answer 1

我找到了一个使用jQuery的简单解决方案：

$('div').on('focusin focusout',function(){ $(this)[(this.contains(document.activeElement)?'add':'remove')+'Class']('whenFocused') })

这不是很简单，但至少它是一个单行。