Question

这是我的问题。请先阅读以下代码。

<div id="outerDiv">
<input id="txt" type="text" />
<div id="innerDiv" style="display:none;z-index:10;">
    some content
</div>
</div>

我想要做的是内部div显示光标聚焦到输入时，如果光标在外部div之外则隐藏。但是如果光标位于内部div上，则不会隐藏内部div。我想通过绑定函数来控制内部div的可见性到输入的焦点和焦点事件，但是我失败了。因为我不能确定光标在哪里与输入的focusout事件功能。我明白了这个问题吗？谢谢。这是我使用的javascript代码：

<script type="text/javascript">
$(function(){
    var outerDiv = $("#outerDiv");
    var innerDiv = $("#innerDiv");
    var txt = $("#txt");
    txt.focus(function () { innerDiv.show(); });
    outerDiv.focusout(function () { innerDiv.hide(); });
})
</script>

当我点击内部div中的文本时，我没有消息，它不会消失。有人遇到过同样的问题吗？

Answer 1

主要问题是当我点击页面的任何其他位置然后关闭pop层的innerDiv。如果要通过在outerDiv上注册focusout事件来实现效果，结果是我甚至无法在innerDiv上触发事件。因为当单击innerDiv的元素时，它将首先在outerDiv上触发focusout事件，即关闭innerDiv。因此，我意识到只需将focusout事件注册到outerDiv就无法实现我想要的效果。我是通过在文档上注册mouseup事件来完成的。绑定到mouseup事件的函数是找出srcElent是否是outerDiv的后代，如果不是，则关闭innerDiv。功能如下：

window.onmouseup = function (mouseevt) {
        var srcElement = mouseevt.srcElement;
        while (srcElement != null && srcElement != window) {
            if (srcElement.id== 'outerDiv') {
                return;
            }
            srcElement = srcElement.parentElement;
        }
        hideInnerDiv();
    };

如何判断div最外层失去光标？

1 个答案: