0

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

<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 可见性的函数绑定到输入的 focus 和 focusout 事件来解决这个问题，但我失败了。因为我无法通过 input 的 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 中的文本时，它不会消失。有人遇到过同样的问题吗？

4

1 回答 1

0

主要问题是当我单击页面的任何其他位置然后关闭弹出层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();
    };
于 2013-11-05T01:41:21.883 回答