ユーザーがポップアップ・ボックス以外の場所をクリックすると、ポップアップ・ボックスが閉じるようにします。 （

Question

は、私は私がテキストボックスのonBlurイベントで「日付のポップアップ」表示=なしをしない基本的http://jqueryui.com/demos/datepicker/

でのような日付ピッカーを構築する方法を学ぶことを試みていたが、もちろん、これは動作しませんユーザーがポップアップボックスをクリックすると、テキストボックスのブラーイベントがトリガーされ、私が望んでいないポップアップボックスが表示されなくなるからです。

私は、ユーザーがポップアップ・ボックス以外の場所をクリックすると、ポップアップ・ボックスが閉じます。

Answer 1

jQuery UIのdatepickerはかなり高度なウィジェットです。 jQuery UIの開発者はmousedownイベントに適用される_checkExternalClickというイベントハンドラを持っています。このイベントハンドラはいくつかの項目をチェックします（datepickerが開いているか、クリックされた要素のid === datepickerのid）、datepickerにはmarkerclass（datepickerの添付を示すclassName要素に追加）がありますか？トリガクラス（例えば、アイコントリガ）など）を含むことができる。すべてが成功すると、_hideDatepicker関数が呼び出されます。

ここに、jQuery UIのdatepickerが行っていることの簡単な例を示します。http://jsfiddle.net/GSzYF/。おそらく、作成するウィジェットは、分散フレームワークと同じようにカスタマイズする必要がないため、jQuery UI datepickerがチェックするすべてのものをチェックする必要はありません。

Answer 2

単純なオプションは、あなたのポップアップよりも小さいZ-インデックスを持つ透明なdivを作成することです。 divスタイルをposition:fixed;width:100%;height:100%;left:0;top:0に設定して、表示可能な画面全体を囲みます。 bodyタグの内容にこれを追加して、固定または絶対位置の他のものに含まれていないことを確認することができます。

これで、クローズハンドラをこのdivに結びつけるだけで、クリックするとポップアップとdiv自体を分解することができます。

空想を得たい場合は、そのdivを非常にわずかに不透明にすることができます。これは、フォーカスがポップアップに表示されることをユーザーに示すのに役立ちます。

その他のオプションは、ウィンドウオブジェクトのマウスイベントまたはクリックイベントを追跡し、マウス座標をポップアップのバウンディングボックスと比較し、ポップアップを閉じて既定のイベントアクションを防ぐことによって外部のクリックを処理することです。率直に言えば、これははるかに複雑でバグが起こりやすいので、必要に応じて最初のテクニックを狙ってください。