質問: 現在上記タグの技術を使って、アプリ開発を行っています。 仕様は以下です。 ・テキストボックスがあり、 そこにフォーカスが当たると、 非表示にしていたボックスが表示される。 ・そのボックス内には、ボタンやリンクといった押下する項目がある。 ・テキストボックスからフォーカスが外れるとボックスを非表示にする javascriptのfocus,focusoutを使って実装しました。 が、以下の点に詰まりました。 表示されたボックス内のボタンやリンクを押下するとfocusoutイベントが発火し、ボックスが非表示になってしまうのです。 これを非表示にしない方法はないでしょうか? ボックス外をクリックした際は、ボックスを非表示にしたいのですが、 ボックス内をクリックした際はボックスを表示したままにしたいのです。 focusoutには別にこだわっていないので、何かいい方法や別のやり方を知っていらっしゃる方がいれば教えていただきたいです。 --- 追記 画面イメージ ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/b093a467bbf6fd1f14f9e733065d8a05.png) コードは以下です。 ``` TEST リンク ボタン ``` --- 追記2 タイムマージンを使った方法 ``` TEST リンク ボタン ```
回答: ### フォーカスが外れるとボックスが消える機能は本当に必要なのか 「フォーカスが外れるとボックスが消える」ように実装しているのですから、別のテキストボックスにフォーカスが移ればボックスが消えるのは当然ですよね。 「フォーカスが外れるとボックスを消える機能」は本当に必要なのでしょうか。 必要だとしたら「なぜ」それが必要だと考えているのでしょうか。 UIの問題に対しては「実装したい機能」だけを伝えても息詰まることがあります。 今回のように「実装しようとしている機能」と「実際の結果」に矛盾があるのであれば設計を見直す必要があります。 その機能を実装する目的をよく意識して、その目的を私たちに伝えるようにしてみて下さい。 そうすれば、良い代替案が提案されるかもしれません。 ### 対処療法 フォーカスが外れてからボックスが消えるまでにタイムマージンをとり、そのマージン内に目的のボックスにフォーカスが移った場合に限り、ボックスを消す動作をキャンセルすれば一応は解決できます。 ただし、これはスマートではない上に、ユーザが直観的にわかるUI設計ではないと思います。 Re: k499778 さん