如何使用 jquery 找到新的焦点项目？

发布于 2024-10-13 01:24:42 字数 412 浏览 5 评论 0原文

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

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

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

原文

I have a pop up dialog that lets you write text and does stuff when you click a button. My code is below

This function works, i find the new object by looking at e.originalEvent.explicitOriginalTarget. However now i notice if i press tab this function will be called but e.originalEvent.explicitOriginalTarget will give me the same current object instead of the new object. So my dialog doesnt close if a user presses tab to leave. How do i find the correct new dom item?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

人心善变 2024-10-20 01:24:57

查看这个问题/答案如何使用 jQuery 选择一个具有焦点的元素

我想这就是为什么你用 $("*:focus"); 没有得到任何东西的原因。在 Firebug 控制台中，当您单击控制台时，该元素将失去焦点。

如果你想用事件来处理它，focus() 的相反是 blur()。

编辑

也许您甚至可以尝试不同的方法。如果您唯一关心的是监视 Tab 键，您可以使用 .keypress() 事件并监视选项卡键码是 9。

回复收藏 0 原文

别把无礼当个性 2024-10-20 01:24:56

event. relatedTarget 为我工作。它将给出事件中的另一个 DOM 元素（如果有）。

一个例子是，如果您有 2 个按钮控制相同的功能，并且不希望连续单击它们时执行它们的代码。您可以附加一个焦点事件处理程序并检查 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.latedTarget/

event.relatedTarget worked for me. It will give the other DOM element, within the event, if there is one.

An example would be, if you had 2 buttons controlling the same function, and didn't want their code to be executed if they were clicked consecutively. You could attach a focusout event handler and check for an ID, or a class name.

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

Perhaps a better example would be the issue I had.

I created a custom drop down list, that has a button beside it. The drop down list can be opened and closed by either clicking on the list, or the button. It can also be closed be losing focus to either object.

This becomes a problem in the following scenario.
1) user opens drop down list by clicking the list object.
2) user closes drop down list by clicking the button.

What happens is the list opens, but when the user goes to close the list, the list loses focus, which closes it, but since they are clicking on the button, it opens back up. The focusout causes the two objects to cancel each other out, in this type of scenario.

By writing the focusout event, I can now set it to only trigger when the relatedTarget doesn't have the same class as the target that called the event.

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

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

回复收藏 0 原文

~没有更多了~