スライドによるページめくり効果とクリックイベント問題をモバイル端末上で実装する

<!-- HTML コード -->
<div class="ページコンテナ">
	<div class="page" style="background: #dc3b26">1</div>
	<div class="page" style="background: #f3b03d">2</div>
	<div class="page" style="background: #44a2f8">3</div>
</div>

/** CSS スタイル */
html,
体{
	マージン: 0;
	パディング: 0;
	幅: 100%;
	高さ：100vh;
	オーバーフロー: 非表示;
	フォントサイズ: 60px;
}
.ページコンテナ{
	幅: 100%;
	高さ: 100%;
}
.ページコンテナ .ページ{
	幅: 100%;
	高さ: 100%;
}

// グローバル js を制御するファイルです // ブラウザのデフォルトの動作をグローバルに防止します document.addEventListener("touchstart",function(e){
	if(e.cancelable){
		e.preventDefault();
	}
},{受動態: false})
// {passive: false} は、前のコードに動作をリセットする必要があるかもしれないことを伝えます document.addEventListener("touchmove",function(e){
	if(e.cancelable){
		e.preventDefault();
	}
},{受動態: false})

// JavaScript コード let curPageIndex=0;
pageContainer を document.querySelector(".page-container"); とします。
let pageNumber=pageContainer.children.length; //ページ数// ドキュメントウィンドウの高さ（ここでは1画面の高さ）
cHeight=document.documentElement.clientHeight とします。
// ページコンテナの margin-top を適切な値に設定して、ビュー関数 toPage(){ に表示されるようにします。
	pageContainer.style.transition="すべて .5 秒の遷移";
	pageContainer.style.marginTop=-curPageIndex*cHeight+"px";
	
	// 変更が完了したらトランジション効果を削除します。
	pageContainer.addEventListener("transitionend",function(){
		pageContainer.style.transition="なし";
	},{once:true})
}
ページへ()

pageContainer.ontouchstart=関数(e){
	let y=e.changedTouches[0].clientY; // 指が押された垂直座標 pageContainer.ontouchmove=function(e){
		let dis=e.changedTouches[0].clientY-y; // 距離を計算する // ページコンテナの上部の余白を計算する
		mtop=-curPageIndex*cHeight+dis とします。
		（mtop>0）の場合{
			0 の場合
		}そうでない場合、mtop<-(ページ番号-1)*cHeight){
			mtop=-(ページ番号-1)*c高さ;
		}
		// リアルタイムで位置を変更します pageContainer.style.marginTop=mtop+"px";
	}
	pageContainer.ontouchend=関数(e){
		dis = e.changedTouches[0].clientY-yとします。
		// スライド距離が短すぎる場合は、スライド前の位置に戻ります if(Math.abs(dis)<=60){
			ページへ()
		}それ以外の場合(dis>0 && curPageIndex>0){
			curPageIndex--;
			ページへ()
		}それ以外の場合(dis<0 && curPageIndex<pageNumber-1){
			curPageIndex++;
			ページへ()
		}
		
		// 指が離れたら、監視イベントをキャンセルします。pageContainer.ontouchmove=null;
		pageContainer.ontouchend = null;
	}
}

<div class="page" style="background: #dc3b26">
	<button onclick="alert('哈哈哈哈')" class="but">クリックしてください!</button>
	1
</div>

<button data-default="true" onclick="alert('哈哈哈哈')" class="but">クリックしてください!</button>

// ブラウザのデフォルトの動作を全体的に防止する document.addEventListener("touchstart",function(e){
	if(e.target.dataset.default){
		戻る;
	}
	if(e.cancelable){
		e.preventDefault();
	}
},{受動態: false})
document.addEventListener("touchmove",function(e){
	if(e.target.dataset.default){
		戻る;
	}
	if(e.cancelable){
		e.preventDefault();
	}
},{受動態: false})

<!-- ボタンは通常のボタンです -->
<button class="but">クリックしてください!</button>

document.querySelector(".but").addEventListener("touchstart",function(e){
	e.stopPropagation();
	alert('嘎哈哈');
}、間違い）