スマホメニュー

クリックとタップを同時に指定したい場合【Javascript】

例えば、Javascriptのonclickを使って何らかの動作をさせたとします。PCでは問題ないですがスマホの場合、onclickだと数ミリ秒遅延してしまいます。それを防ぐために、touchstartを使うわけですが、その両方を指定してしまうと、スマホの場合touchstartを実行して更にonclickを実行してしまい、目的の動きができません。それを防ぐためのメモ。

タッチイベントを取得出来るかで判断

「window.ontouchstart」で帰ってくる値が何かを判断する事で、クリックしかできない端末か、タップが出来る端末かを判断します。
「null」がかえってくる場合はタッチイベントが出来る端末と判断し、「underfined」がかえってくる場合はクリックしかできない端末と判断します。

動きのサンプル

■タップ出来る?
→ 判定中…

実際にイベントを指定してみる

実際に判断しているのは2行目の部分になります。

「_click」という名前の変数に「window.ontouchstart」でかえってくる値が「undefined」だったら、「click」を入れます。そして、それ以外の場合は「touchstart」を入れます。

これで、クリックかタップのどちらかしか使わないようにできるので、クリックとタップが競合し合うことはありません!!

2017年8月1日 追記
この記事が3年前なので、今でしたらaddEventListenerだけでも良いかもしれません。

また、jQueryの時ももちろん同様に使えます。

動きのサンプル

ボタンを押した回数
0

PCではクリックで動いて、スマホ・タブレットではタップでボタンが押せます。

チラシの裏

ちなみにクリックだけ指定してみると…

ボタンを押した回数
0

PCでボタンをクリックすると、通常通りですが、スマホ・タブレットでタップすると、タップした後、じゃっかん間をおいて反応するのが確認できるかと思います。

更にちなみに click と ontouchstart を同時に指定してみると…

ボタンを押した回数
0

PCでボタンを押す分には通常どおりです。
しかし、スマホ・タブレットでボタンを押すと、クリックとタップが1回ずつ実行されてしまいます。clickとtouchstartはどちらかを優先させるとかはないみたいですね。

“クリックとタップを同時に指定したい場合【Javascript】” への3件のフィードバック

  1. 名無し より:

    Firefoxはwindow.ontouchstartがnullになる。(でもontouchstartは効きません)

  2. Muu より:

    返信が遅くなりましたが、ただいま確認したところ、
    「windows10」と「OS X El Capitan」の「Firefox」で「undefined」になることを確認いたしました。
    もしかしたら、Firefoxのバージョンでnullが返ってくるバージョンがあったのかもしれませんね…。

  3. […] 2017年11月30日 これだけだとスマホやタブレット環境のタップに反応しないので、こちらのサイトを参考に少し修正しました […]

コメントを残す

メールアドレスが公開されることはありません。

Advertising

最近の記事

アーカイブ

Advertising

Advertising

カレンダー

2024年3月
« 10月    
 12
3456789
10111213141516
17181920212223
24252627282930
31  

タグ

Social