【JavaScript】スマホでスワイプを無効にする方法

今回の記事では、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指が離れた時

関連記事

【JS】mouseoverとmouseenterの違い

関連記事

コメント

この記事へのトラックバックはありません。