vuetify - v-windowタブのスワイプキャンセル

vuetifyのv-windowでタブを構成してv-window-item内に含まれるスクロール要素がタッチイベントに反応してタブスワイプしてしまうのをガードする実装

通常スワイプインベントもとい、タッチイベントはwindowコンポーネントにバブリングで伝播されてタブスワイプが実行されるため、特定条件でタッチイベントをキャンセルしたい。

オーバーフロースクロールなテーブルコンテナのタッチイベントのバブリングをキャンセルする例 )

// タッチイベントのソースがTHかTDの場合、親へのイベントバブリングをキャンセル
const touchCancelBehavior = e => {
	if (e.target.tagName === 'TH' || e.target.tagName === 'TD') {
		e.stopPropagation();
		e.stopImmediatePropagation();
    }
}

// v-windowコンポーネント系にリッスンさせる
let wList = document.querySelectorAll('.v-window, .v-window__container, .v-window-item')
wList.forEach( target => {
	target.addEventListener('touchstart', touchCancelBehavior)
    target.addEventListener('touchmove', touchCancelBehavior)
    target.addEventListener('touchend', touchCancelBehavior)
})