Svelteアプリでクリックイベントのスマホ対応〜preventDefaultでタッチイベントを適切にさばく
※ 当ページには【広告/PR】を含む場合があります。
2023/02/21
1. タッチイベントのデフォルト抑制(preventDefault)を理解する
2. 古いブラウザへのタッチイベント対応を考える
3. Svelteの{#if}構文で要素を柔軟に切り替えてイベントハンドリングする
touch系イベントをpreventDefaultする
clickイベント | touchイベント | |
|---|---|---|
デスクトップ | ○ | ☓ |
モバイル | ○ | ○ |
1. タッチイベント処理を続けないようにする
2. クリックイベント(マウス)の伝達を抑止する
mousedownmouseuptouchstarttouchend
...
<button class="position-top btn cross-key-btn"
on:mousedown={() => cursorHandler(1,0)}
on:mouseup={() => cursorHandler(1,1)}
on:touchstart|preventDefault={() => cursorHandler(1,0)}
on:touchend|preventDefault={() => cursorHandler(1,1)}><span class="top-mark">▲</span>
</button>
...
on:mousedownon:touchstart|preventDefaulton:mouseupon:touchend|preventDefaultpreventDefalut古いブラウザへのタッチイベント対応
preventDefaultpreventDefault
<script lang="ts">
import { onMount } from 'svelte';
onMount(() => {
let isMobile = "ontouchstart" in window;
if (isMobile) {
console.log('タッチイベントが使えます');
} else {
console.log('タッチイベントが使えません');
}
});
</script>
...
isMobile
function onClick() {
if (!isMoble) {
//何らかのイベント処理
hoge();
}
}
function onTouch() {
//何らかのイベント処理
hoge();
}
Svelteでデバイス対応を細かく切り分けるときのベストプラクティス
...
<button class="position-top btn cross-key-btn"
on:mousedown={() => cursorHandler(1,0)}
on:mouseup={() => cursorHandler(1,1)}
on:touchstart|preventDefault={() => cursorHandler(1,0)}
on:touchend|preventDefault={() => cursorHandler(1,1)}><span class="top-mark">▲</span>
</button>
...
{#if}〜
{#if isMobile}
<!-- モバイルモードの場合にはこっち -->
<button class="position-top btn cross-key-btn"
on:touchstart|preventDefault={() => cursorHandler(1,0)}
on:touchend|preventDefault={() => cursorHandler(1,1)}><span class="top-mark">▲</span></button>
{:else}
<!-- 通常のデスクトップモード -->
<button class="position-top btn cross-key-btn"
on:mousedown={() => cursorHandler(1,0);}
on:mouseup={() => cursorHandler(1,1);}>▲</span></button>
{/if}
まとめ
1. タッチイベントのデフォルト抑制(preventDefault)を理解する
2. 古いブラウザへのタッチイベント対応を考える
3. Svelteの{#if}構文で要素を柔軟に切り替えてイベントハンドリングする
記事を書いた人
ナンデモ系エンジニア
これからの"地方格差"なきプログラミング教育とは何かを考えながら、 地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。
カテゴリー