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 イベント機能でカーソルがどこにあるのかわからないからです。私は質問を明確にしていますか？事前にt​​hx。使用した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 の要素をクリックすると、まず、innerDiv を閉じるための outerDiv で 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 に答える