以前outside clickで浮上したモデルやpopupなどの消去を実現したことがありますが、その時はjsをうまく処理していなかったからなのか、本当に長いコードを書いたからなのか、毎月のポップアップで相応の論理を実現していたので、本当に複雑でした.
でもちょっと成長したからかなㅠㅠㅠ実は今ちょっと感動本当にできるの?繰り返しました.
このコードはe.stopPropagation();を使用する可能性がありますが、すべての場合は適用されませんが、簡単すぎるので、残って見たいと思います.

js

コード#コード#

let currentShowingElement;

whenClickMakeSomethingVisibleElement.addEventListener('click', (e) => {
  e.stopPropagation();
  if (!!popupItem) popupItem.style.visibility = 'hidden';
  currentShowingElement = visibledElement;
  visibledElement.style.visibility = 'visible';
});

const body = document.querySelector('body');
body.addEventListener('click', () => {
  if(!!currentShowingElement){
    currentShowingElement.style.visibility = 'hidden';
    currentShowingElement = ''
  }
});

インプリメンテーションロジック

currentshowingElement=現在のポップアップウィンドウ

ClickMakeSomethingVisibleElement=この要素をクリックすると、表示されるElementの要素

が表示されます.

visibledElement=可視性を変更する要素(後で「外部」をクリックして削除する要素)

1-1. e.stopPropagation(); クリックイベントをbublingにし、bodyラベルが参照されないまで設定します.
注意!(clickイベントを使用して他の要素にフォーカスし、このフォーカスイベントを使用してvisibledElementの可視性を変更する必要がある場合は、->clickイベントが発生した要素はe.stopPropagation()を使用する必要があります.設定にご注意ください!)
1-2. ページにvisibledElementの要素が複数ある場合は、WhenClickMakeSomethingVisibleElementでイベントコールバック関数をクリックします. if (!!popupItem) popupItem.style.visibility = 'hidden';コードを作成し、現在ポップアップされている要素を削除し、1-3を処理する必要があります.
(このコードがある場合のみ、ポップアップ・メニューのポップアップ・メニューが重複するか、2番目のポップアップ・メニューのみが閉じられます.以前のポップアップ・メニューは通常ではありません.=>一度に1つのポップアップ・メニューのみが表示されます.)
1-3. Click MakeSomethingVisibleElementで、clickイベントコールバック関数の可視性を変更する要素をグローバル変数currentShow Elementに入れるコードを追加します.

2-1. クリックイベントをbodyに追加します.
2-2. 現在のcurrentShowwingElementに要素が含まれている場合は、その要素を非表示にします.
2-3. currentShowingElementをクリア!

インプリメンテーション

ClickMakeSomethingVisibleElement(表示する要素)をクリックして要素を表示します.

visibledElementの内部をクリックしても、要素

の表示を続行できます.

可視要素以外の要素をクリックすると、すぐに消えた要素

少しずつ成長してきたけど成長を感じてくれて本当にありがとう!!ずっと成長しています!がんばって!
React outer clickウィンドウブログ記事を閉じる