[TIL] 0414

8085 ワード
NotionClone Refactoring テキストリンク

NotionClone Project Refactoring


ツリー構造リストでイベントを設定中にエラーが発生しました

に質問


ulに掛けたら

  • 子ulでもイベントが発生したため、イベントBubblingイベント
    • が発生した.
  • トップレベルUL 2イベント
  • 1デップのPageItemが2つあるため、PageItem要素が1つ生成されるたびに$targetに入る一番上のULに1つずつイベントが掛けられる.
    •   setEvent() {
    console.log(this.$target);
    this.$target.addEventListener('click', e => {
      // e.stopPropagation();
      console.log(e.currentTarget);
    });
  }

    各アイテム(li)


    setEvent() {
    this.$node.addEventListener('click', e => {
      // e.stopPropagation(); 
      console.log(e.target.closest('.page').dataset.id);
    });
  }
  • 子liでもイベントが発生したため、イベントbublingが発生しました
  • e.stopPropagation()を設定すると、
    • を解決できます.

    最終メソッド


    各項目にe.stopPropagation()を設定できますが、
    品物が多くなると、活動が多すぎる.
    トップレベルのul対応のPageListコンポーネントでは、親ラベルtarget属性にイベントを掛け、イベント委任を使用します.
    
// PageList.js

 setEvent() {
    this.addEventToTarget('click', '.page', e => {
      const { onClickRemove } = this.state;
      const { className } = e.target;
      const id = e.target.closest('.page').dataset.id;

      switch (className) {
        case 'page_name':
          push(`/pages/${id}`);
          break;
        case 'page_toggleButton':
          console.log('toggle');
          break;
        case 'page_removeButton':
          onClickRemove(id);
          break;
        case 'page_add_pageButton':
          console.log('add');
          break;
        default:
      }
    });
  }
}
    jqのsort()法を用いてページ要素domを昇降順に配列する
    8.WebブラウザでNAVER地図APIを使用する