Onblur事件在另一个div的onclick之前触发 [英] Onblur event fires before another div's onclick

问题描述

如上，我有一个按钮，点击后会打开子菜单。对于子菜单中的每个选项，都有三个元素（实际上我认为更多，但为了简单起见将保留为3）。我将焦点放在子菜单的主div（白色框架）上。这个div的onblur - 然后我隐藏子菜单。

这一切都像预期的那样 - 但我有一个探索，当一个特定选项的3个元素之一被点击（即给定的焦点），由于它的onblur事件处理函数，主div将关闭 - 并且与子菜单中的选项的元素的onClick事件相关联的PopUp函数不会被触发/到达。

如果选项没有被点击，我需要通过这种方式来处理主div的onblur事件。

我有JQuery明显使用，所以我非常乐意使用它来解决这个问题。

我会发布这个答案 - 希望有人可以改进它或提出一个替代方案，因为它确实感觉像一个工作。

但是，我我们已经完成了onblur事件 - 而不是立即隐藏div，而是使用超时进行了一小段延迟，所以我不要改变onblur / onclick事件的优先级，但实际上可以触发onclick'一次机会'。

As above, I have a button that, when clicked, will open the sub-menu. For each option in the sub-menu there are three elements (there's actually more I think, but will keep it as 3 for simplicity). I give focus to the main div (white 'frame') of the sub-menu. Onblur of this div - I then hide the sub-menu.

This all behaves as expected - but I have the probem that when one of the 3 elements for a particular option are clicked (i.e. given focus), the main div will close due to it's onblur event handler - and the PopUp function that's linked to the onClick event of the elements for the options in the sub-menu are not fired/reached.

I need someway of only handling the onblur event of the main div in this way if the options haven't been clicked.

I have JQuery to use obviously so I'm more than happy to work with that to solve the problem.

解决方案

I'm going to post this answer - in the hope that someone can improve on it or suggest an alternative because it really does feel like a work around.

But, what I've done is on the onblur event - instead of instantly hiding the div, I've put in a small delay using a timeout so I don't alter the precedence of the onblur/onclick events fired but in effect give the onclick 'a chance' to fire.

这篇关于Onblur事件在另一个div的onclick之前触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！