非特定領域を特定するクリック(イベント)

1407 ワード
JavaScript clickevent addEventListener テキストリンク

実施希望内容



右上のアウトライン画像をクリックすると、次のメニューボックスが表示されます.

ここで、右上隅の梁画像以外の領域を再度クリックして、メニューボックスを消去します.

失敗


表示値を「none」と「block」に変換して、クリックした要素とクリックしない要素を区別しようとします(this==右上輪郭画像要素)
=>ただし、右上隅の梁画像elemnet以外の領域をクリックすると、イベント気泡化現象のため、右上隅の梁画像を含むすべての含む関係のelementがここにインポートされる可能性があります.条件式が常に偽/であり、e.stopPropagation()で解決しようとする場合、は解決できません.

そして、解決(最終コード)

  • e.targetの値は、イベントが発生する直接ターゲット要素のみを取得する属性
    • である.
  • if文をif(e.target==右上隅プロファイル画像要素)に変更し、trueを満たすと内部コードが正常に実行されます.
  • 以外の領域をクリックすると、else{}内のdisplay=「none」は実行時に消えます.👍 
    • const navProfile = document.querySelector('#profileImg');
const menuContainer = document.querySelector('.menuContainer');
const body = document.querySelector('body');

function showMenu(e) {
  if (e.target == navProfile) {
    const coordinate = this.getBoundingClientRect();
    const targetBottom = coordinate.bottom;
    const targetLeft = coordinate.left;

    menuContainer.top = `${targetBottom + 20}px`;
    menuContainer.left = targetLeft;

    menuContainer.style.display = 'block';
  } else {
    menuContainer.style.display = 'none';
  }
}

body.addEventListener('click', showMenu);
    UI5 Walkthrough #7
    base 64復号