# Svelteアプリでクリックイベントのスマホ対応〜preventDefaultでタッチイベントを適切にさばく |p2>2023/02/21{1}ポインターインターフェース{1}「タッチイベント」{2}クリックイベントとタッチイベントが競合してしまう{1}「preventDefault」 cursorHandler(1,0)} on:mouseup={() => cursorHandler(1,1)} on:touchstart|preventDefault={() => cursorHandler(1,0)} on:touchend|preventDefault={() => cursorHandler(1,1)}>▲ ... ``` やっていることは`on:mousedown`を`on:touchstart|preventDefault`、`on:mouseup`を`on:touchend|preventDefault`でそれぞれ拡張させて、クリックイベントを持つ全ての要素に追加していくだけです。これだけでクリックイベントのスマホ対応は完了です。 `preventDefalut`の理屈を知っていたら簡単ですね。 - - - ## 古いブラウザへのタッチイベント対応現状ではほとんどのブラウザで対応していると予測しますが、古いAndroidデバイスなどのブラウザではタッチイベントの`preventDefault`には対応していない恐れがあります。そこで、クリックイベントとタッチイベントを適切なデバイスごとに切り替えるための実装を自前で対処します。やることは先程の`preventDefault`の考え方と同じで、|px>{2}モバイルモードのときにクリックイベントが無効化 import { onMount } from 'svelte'; onMount(() => { let isMobile = "ontouchstart" in window; if (isMobile) { console.log('タッチイベントが使えます'); } else { console.log('タッチイベントが使えません'); } }); ... ``` この`isMobile`を使って、クリックイベントのときのハンドラと、タッチイベントのハンドラを2つ用意して、モバイルモードのときにクリックイベントがスキップされるようにスクリプトを実装します。 ```ts イベントの実装イメージ function onClick() { if (!isMoble) { //何らかのイベント処理 hoge(); } } function onTouch() { //何らかのイベント処理 hoge(); } ``` もちろん古いブラウザまでサポートするかどうかは、開発者の判断におまかせします。 - - - ## Svelteでデバイス対応を細かく切り分けるときのベストプラクティス先程取り上げたスマホ対応の実装をもう一度良く眺めてみましょう。 ```html controller.svelteのbutton要素の一部 ... ... ``` このイベントを一つの要素に詰め込んだ書式をみて、パッと「デスクトップ」と「スマホ」の両方いっぺんに対処する、と他の人から理解するのは少しむずかしいはずです。つまり、一つの要素に多すぎるイベントを追加することがあまりいい書き方になっていません。ではSvelteの場合どうするのが良いかというと、`{#if}〜`で構造分岐構文を利用します。先程の例で置き換えると、 ```html controller.svelteのbutton要素の一部 {#if isMobile} {:else} {/if} ``` のようになります。 Svelteで開発する場合、こちらの方がイベントの身通しがよくなります。 - - - ## まとめ以上、今回の記事の話をまとめると、以下のようなになります。 ```text この記事のポイント 1. タッチイベントのデフォルト抑制(preventDefault)を理解する 2. 古いブラウザへのタッチイベント対応を考える 3. Svelteの{#if}構文で要素を柔軟に切り替えてイベントハンドリングする ``` 一昔と比べて、スマホのブラウザもモダンなWeb APIの機能に対応してはきました。しかし依然として細やかな操作を実現したいなら、デバイス向けの専用アプリを作るほうに一日の長がある感は否めません。専用アプリには専用アプリの、ブラウザアプリにはブラウザアプリの良さ・悪さがありますので、開発の選択肢も複数持たれておくと良いと思います。