3

我有一个弹出对话框，可让您在单击按钮时编写文本并执行操作。我的代码如下

这个函数有效，我通过查看 e.originalEvent.explicitOriginalTarget 找到了新对象。但是现在我注意到，如果我按下 tab，这个函数将被调用，但 e.originalEvent.explicitOriginalTarget 会给我相同的当前对象而不是新对象。因此，如果用户按标签离开，我的对话框不会关闭。我如何找到正确的新 dom 项？

$('#Area').focusout(function (e) {
    if ($(e.originalEvent.explicitOriginalTarget).closest('#Area').size() == 0)
        $('#Area').hide();
});
4

2 回答 2

17

event.relatedTarget 为我工作。如果有，它将在事件中提供另一个 DOM 元素。

例如，如果您有 2 个按钮控制相同的功能，并且不希望在连续单击它们时执行它们的代码。您可以附加一个 focusout 事件处理程序并检查 ID 或类名。

$(".buttons").on("focusout", function (event) {
    if($(event.relatedTarget).prop("class").indexOf("buttons") === -1) {
        //code to execute
    }
});

也许一个更好的例子是我遇到的问题。

我创建了一个自定义下拉列表，旁边有一个按钮。下拉列表可以通过单击列表或按钮来打开和关闭。它也可以在失去对任一对象的焦点时关闭。

在以下场景中，这将成为一个问题。1) 用户通过单击列表对象打开下拉列表。2) 用户通过单击按钮关闭下拉列表。

发生的情况是列表打开，但是当用户关闭列表时，列表失去焦点，这将关闭它，但由于他们单击按钮，它会重新打开。在这种情况下，焦点输出会导致两个对象相互抵消。

通过编写 focusout 事件，我现在可以将其设置为仅在 relatedTarget 与调用该事件的目标没有相同的类时触发。

$(".listControl").on("focusout", function (event) {
    if($(event.relatedTarget).prop("class").indexOf("listControl") === -1) {
        //Close the drop down list
    }
});

http://api.jquery.com/event.relatedTarget/

于 2013-09-19T15:27:33.217 回答
2

查看此问题/答案如何使用 jQuery 选择关注它的元素

我认为你没有得到任何东西的原因 $("*:focus"); 在 Firebug 控制台中，当您单击控制台时，元素会失去焦点。

如果你想用事件来解决它，focus()的反面是blur()。

编辑

也许你甚至可以尝试不同的方法。如果您唯一关心的是查看 tab 键，您可以使用.keypress()事件并查看 9 的 tab键码。

于 2011-01-20T17:48:47.873 回答