アンカーとフォームへの割り込み

((w, d) => {
  d.addEventListener('DOMContentLoaded', () => {
    /**
     * 検索送信
     */
    d.querySelectorAll('#header form[role]').forEach(d => {
      d.addEventListener('submit', e => {
        try{
          e.stopPropagation();
          e.preventDefault();

          const searchWord = (e.target as HTMLElement)!.querySelector('input')!.value + ''

          if(searchWord.replace(/[ 　]/g, '') === ''){
            setWarn('検索ワードを入力してください')
            throw new Error('検索ワードを入力してください')
          }

          fireRouting('?!/search/' + searchWord)
        }catch(e){
          console.log((e as Error).message)
        }

        return false;
      })
    })

    /**
     * ルーティング処理
     */
    d.querySelectorAll('a[data-local]').forEach(e => {
      e.addEventListener('click', elRouter)
    })
  })

  /**
   * === イベントリスナ ===
   */
  const elRouter = (e: Event) => {
    let target = <HTMLElement| null> e.currentTarget
    while(target && target?.tagName.toUpperCase() !== 'A'){
      target = target?.parentElement ?? null
    }
    if(target && target.getAttribute('href')){
      fireRouting(target.getAttribute('href') ?? '')
      e.stopPropagation()
      e.preventDefault()
    }
  }

  /**
   * ルーティング: アンカー押下 or フォーム送信
   * @param url リンク先URL
   */
  const fireRouting = async (url: string) => {
    history.pushState({}, '', url)
    domUpdate(url)
  }
})(window, document)

Aタグをクリックした時の処理はイベントリスナを引っ掛けておきました。

語句検索する場合はフォーム送信イベントから処理が発火します。

当然と言えば当然なんですが、DOM更新で新しくAタグが生成されて内部ルータで処理させたい場合。

そいつらにもイベントリスナを新しく登録する必要があるのが少し面倒なところ。

ともあれ部屋替えはアナリティクス対策なのでもう少し様子見。

まだだめなら何か方法を考えるかもです。