タップイベントが使えるか判定して、touchstartかclickか切り替える方法

ウェブ制作技術

こんばんは、ヒグチです。
いよいよ寒くなってきました。私の住む新潟は、いつ雪が降ってきてもおかしくありません。

車のタイヤもスタッドレスに取り替えました。
かまくらのつくり方も、雪合戦で華麗に勝つ方法も、雪だるまに命をふきこむ術も、ひと通り予習してあります。
あとは雪がふるのを待つのみ。

今日は、細かいですが、ウェブ制作の小技を紹介します。

コーディングTIPS

スマートデバイスでのclickは、反応が悪いから

javascriptで、clickイベントを書きます。
「クリックしたら何かする」というやつですね。

こんな感じです。

プログラミング

で、このclickですが、スマートフォンやタブレットなどのスマートデバイスでは、反応が鈍いです。
効くことは効くのですが、遅いんですね。

これは気持ちいいUIを作りたい時や、ゲームなんかでは、致命的な鈍さになります。

タップできるときはtouchstart、できない時はclick

そこで、ちょっとしたコードで対策します。

スマートデバイスでは、クリックではなく「タップ」系のイベントが当然反応がいいです。
touchstartやtouchendなどです。

なので、タップイベントが使えるか判定して、touchstartかclickか切り替えるということを目指します。

タップできるときはtouchstartにして、できない時はclickにしたい!というわけです。

プログラミング

それではコードを見てみましょう。

カンタンです。

条件分岐した結果を mytap という変数に入れます。
で、それを addEventListenerの第一引数に入れてあげます。

もちろんjQueryの on などにも、同じ要領で使えます。


以上、本日のtipsでした。
早くかまくらの中で熱燗をすすりながらコーディングしたいものです。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。