外部検出器をクリックします

それは、何かをクリックすることができる合理的なUXのことであり、それをクリックしてそれを閉じることができるだけでなく、それが開いたものをクリックして閉じることができるだけでなく、それを閉じることができます。キティ・ジラウデルはそれについてブログを書きました。トリックは、物が開かれたら、イベントの時計を使用してイベントハンドラーをウィンドウに添付していることです（別のクリックのように）。その後のクリックが新しくオープンしたエリア内で発生しなかった場合は、閉じます。ように、文字通りthing.contains（event.target）。それはいいトリックだと思います。

考えるべきことがたくさんあります。例えば：

Toggle自体のクリックイベントのプロパゲーションを停止する必要があります。それ以外の場合は、ウィンドウクリックリスナーに上がり、トグルがメニューに含まれていないため、開こうとするとすぐに後者を閉じます。

右。それを持つことができないか、それがすべてを壊します。

Codepenの多くの場所で同じパターンがあります。キティのように、私たちはそれをReactに実装しました。私たちの実装を覗き見する際に、私が言及する価値があると私が考えたいくつかの鐘とwhistがあります。たとえば、私たちのものは関数やフックではありませんが、次のようなコンポーネントラッパーです。

 <clickoutsidedetector onclickoutside="{（）="> {closetheThing（）; }}
>
  メニューやモーダルなど。
</clickoutsidedetector>

そうすれば、「外部をクリックする」のすべてに使用できるのは一般的なラッパーです。鐘とwhistは次のとおりです。

• コンポーネントのプロップで渡すことができます。そうすれば、
  として現れる必要はありませんが、それを意味するものは何でもしたいものは何でも。
• リッスンの小道具は、現在積極的にイベントを聴いている場合に切り替えることができます。短絡する簡単な方法のように。
• ESCキープレスは、外部をクリックするのと同等です。
• タッチイベントとクリックを処理します
• クリックが
• 要素を無視することを可能にするため、キティが文書化した停止プロパゲーションのトリックではなく、外側のクリックをトリガーしない要素について具体的にすることができます。

たくさんのささいなこと！私にとって、これは現実世界の開発の完璧な小さな例です。ちょっとした動作が必要なだけで、最終的には多くの考慮事項とエッジケースが対処しなければならないことがありますが、それは決して行われません。私たちは、ページで使用されているIFRAMEに影響を与えた何かを変更したサードパーティのツールのために、ここ数ヶ月でコンポーネントに触れました。最終的に、私はぼかしイベントを監視しなければなりませんでした。その後、document.activeElementのクラスリストをチェックして、それが外でクリックを食べているかどうかを確認しました。

Annnnyway、私はここで私たちの唯一の瞬間に捨てられたバージョンを投げました。

そして、私たちは処理していなかったキティの投稿から何かを見ました。それは最初の文にあります。

メニューの外側をクリックしたり、タブアウトしたりするときに、メニューを閉じる方法が必要でした。

私の強調。心配しないでください、私は今、私たちのコードにtodoを持っています。

以上が外部検出器をクリックしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。