0

我在这个 jsfiddle 中有一些框 - http://jsfiddle.net/SzDZn/1/ - 我想知道为什么单击它们中的任何一个仍然将主体显示为活动元素：

$('#blue_box').click(function() {
    alert ("active box is " + document.activeElement);
});

这里的目标是当点击在它之外时实际上使一个框消失，即在它的模糊事件中，但我什至无法让框获得焦点，更不用说失去焦点了。

谢谢

4

1 回答 1

2

要使元素获得焦点，它必须能够接收输入。您的任何“框”都不能，因此单击时它们不被视为具有焦点。有一些方法可以通过在元素上设置 tabindex 来绕过焦点要求，但这仍然被认为是非标准的。

“当没有选择时，活动元素是页面的<body>。” - Mozilla - activeElement

jsFiddle Demo

该答案是您的标题，但并未完全解决您的本地化示例。在您的示例中，如果您希望在单击时使元素变为“活动”，那么只需给它一个类。例如，让每个元素点击类“activeElement”。现在，当注册任何点击事件时，我们知道如果我们删除类“activeElement”的元素，我们将删除最后一个被点击的框。我们还要确保我们不会意外地允许这些点击事件传播，否则我们将删除错误的元素。

$('#red_box').click(function(e) {
 e.stopPropagation();
 $('.activeBox').remove();
 $(this).addClass("activeBox");
 alert($(".activeBox")[0].id + " is the active box");
});

$('#green_box').click(function(e) {
 e.stopPropagation();
 $('.activeBox').remove();
 $(this).addClass("activeBox");
 alert($(".activeBox")[0].id + " is the active box");
});

$('#beige_box').click(function(e) {
 e.stopPropagation();
 $('.activeBox').remove();
 $(this).addClass("activeBox");
 alert($(".activeBox")[0].id + " is the active box");
});
于 2013-05-13T22:18:24.143 回答