今回の記事では、JavaScriptを使用して「スワイプ」を無効にする方法について解説します。
JavaScriptを使用した実装になります。
スワイプは、スマートフォンで使用されるイベントになりますが、ユーザーにとって便利な反面、
WEBサイトの動作不良の原因になることもあります。
スワイプを無効にしたい方は、是非参考にしていただけますと幸いです。
実装
HTMLやCSSのコードも紹介していますが、メインはJavaScriptです。
余裕のある方は、エディタにソースをコピーして動作確認をしてみてください。
HTML
<div class="container swipe-not-working">
<section class="touchmove">スワイプを抑制</section>
</div>
<div class="container swipe-working">
<section>スワイプできる</section>
<section>スワイプできる</section>
</div>JavaScript
document.querySelector('.touchmove').addEventListener('touchmove', function(e) {
e.preventDefault();
});イベントが発火したタイミングで、e.preventDefault();とすることでイベントを中止しています。
これで、対象要素でスワイプができなくなりました。
CSS
.container {
max-width: 800px;
margin: 0 auto;
}
section {
height: 100px;
border: 1px solid #333;
margin-top: 40px;
text-align: center;
}
.swipe-not-working {
background-color: #333;
color: #fff;
}最後に
touch系のイベントはこのほかにも、touchendやtouchmoveなどのイベントがあります。
最後に、それぞれの特徴をまとめておきましょう。
| touchstart | 指が触れた時 |
| touchmove | スワイプやフリック中 |
| touchend | 指が離れた時 |
