クリックとタップを同時に指定したい場合【Javascript】
- Date：
- Category：Javascript
- Tags：Javascript
- Response：Comments 3
-
例えば、Javascriptのonclickを使って何らかの動作をさせたとします。PCでは問題ないですがスマホの場合、onclickだと数ミリ秒遅延してしまいます。それを防ぐために、touchstartを使うわけですが、その両方を指定してしまうと、スマホの場合touchstartを実行して更にonclickを実行してしまい、目的の動きができません。それを防ぐためのメモ。
タッチイベントを取得出来るかで判断
|
1 2 3 4 |
//タップが出来る場合（SP・タブレットなど） if (window.ontouchstart === null) alert('タッチ'); //クリックしかできない場合（PCなど） if (window.ontouchstart === undefined) alert('クリック'); |
「window.ontouchstart」で帰ってくる値が何かを判断する事で、クリックしかできない端末か、タップが出来る端末かを判断します。
「null」がかえってくる場合はタッチイベントが出来る端末と判断し、「underfined」がかえってくる場合はクリックしかできない端末と判断します。
動きのサンプル
- ■タップ出来る？
- → 判定中…
|
1 2 3 4 5 6 7 |
//タップが出来る場合（SP・タブレットなど） var tap = document.getElementById('tap'); if (window.ontouchstart === null) { tap.innerHTML = '出来る!!'; }else { tap.innerHTML = '出来ない…'; } |
実際にイベントを指定してみる
|
1 2 3 4 5 6 |
if (document.addEventListener){ var _click = (window.ontouchstart === undefined)? 'click' : 'touchstart'; element.addEventListener(_click, hoge, false); }else if(document.attachEvent){ element.attachEvent('onclick', hoge); } |
実際に判断しているのは2行目の部分になります。
|
2 |
var _click = (window.ontouchstart === undefined)? 'click' : 'touchstart'; |
「_click」という名前の変数に「window.ontouchstart」でかえってくる値が「undefined」だったら、「click」を入れます。そして、それ以外の場合は「touchstart」を入れます。
これで、クリックかタップのどちらかしか使わないようにできるので、クリックとタップが競合し合うことはありません!!
2017年8月1日 追記
この記事が3年前なので、今でしたらaddEventListenerだけでも良いかもしれません。
|
1 2 |
var _click = (window.ontouchstart === undefined)? 'click' : 'touchstart'; element.addEventListener(_click, hoge, false); |
また、jQueryの時ももちろん同様に使えます。
|
1 2 3 4 |
var _click = (window.ontouchstart === undefined)? 'click' : 'touchstart'; $('#hoge').on(_click, function() { // ココに処理 }); |
動きのサンプル
- ボタンを押した回数
- 0
|
1 2 3 4 5 6 7 |
<div class="clickTapCheck"> <dl> <dt>ボタンを押した回数</dt> <dd id="clickTapCnt">0</dd> </dl> <p class="clickTap"><button id="clickTapBtn">ボタン</button></p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var cTCnt = 0; var clickTap = document.getElementById('clickTapBtn'); var clickTapCnt = document.getElementById('clickTapCnt'); if (document.addEventListener){ var _click = (window.ontouchstart === undefined)? 'click' : 'touchstart'; clickTap.addEventListener(_click, function(){ cTCnt++; clickTapCnt.innerHTML = cTCnt; }, false); }else if(document.attachEvent){ clickTap.attachEvent('onclick', function(){ cTCnt++; clickTapCnt.innerHTML = cTCnt; }); } |
PCではクリックで動いて、スマホ・タブレットではタップでボタンが押せます。
チラシの裏
ちなみにクリックだけ指定してみると…
- ボタンを押した回数
- 0
|
1 2 3 4 5 6 7 |
<div class="clickTapCheck"> <dl> <dt>ボタンを押した回数</dt> <dd id="clickTapCnt2">0</dd> </dl> <p class="clickTap"><button id="clickTapBtn2">ボタン</button></p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var cTCnt2 = 0; var clickTap2 = document.getElementById('clickTapBtn2'); var clickTapCnt2 = document.getElementById('clickTapCnt2'); if (document.addEventListener){ clickTap2.addEventListener('click', function(){ cTCnt2++; clickTapCnt2.innerHTML = cTCnt2; }, false); }else if(document.attachEvent){ clickTap2.attachEvent('onclick', function(){ cTCnt2++; clickTapCnt2.innerHTML = cTCnt2; }); } |
PCでボタンをクリックすると、通常通りですが、スマホ・タブレットでタップすると、タップした後、じゃっかん間をおいて反応するのが確認できるかと思います。
更にちなみに click と ontouchstart を同時に指定してみると…
- ボタンを押した回数
- 0
|
1 2 3 4 5 6 7 |
<div class="clickTapCheck"> <dl> <dt>ボタンを押した回数</dt> <dd id="clickTapCnt3">0</dd> </dl> <p class="clickTap"><button id="clickTapBtn3">ボタン</button></p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var cTCnt3 = 0; var clickTap3 = document.getElementById('clickTapBtn3'); var clickTapCnt3 = document.getElementById('clickTapCnt3'); if (document.addEventListener){ clickTap3.addEventListener('touchstart', function(){ cTCnt3++; clickTapCnt3.innerHTML = cTCnt3; }, false); clickTap3.addEventListener('click', function(){ cTCnt3++; clickTapCnt3.innerHTML = cTCnt3; }, false); }else if(document.attachEvent){ clickTap3.attachEvent('onclick', function(){ cTCnt3++; clickTapCnt3.innerHTML = cTCnt3; }); } |
PCでボタンを押す分には通常どおりです。
しかし、スマホ・タブレットでボタンを押すと、クリックとタップが1回ずつ実行されてしまいます。clickとtouchstartはどちらかを優先させるとかはないみたいですね。
Firefoxはwindow.ontouchstartがnullになる。（でもontouchstartは効きません）
返信が遅くなりましたが、ただいま確認したところ、
「windows10」と「OS X El Capitan」の「Firefox」で「undefined」になることを確認いたしました。
もしかしたら、Firefoxのバージョンでnullが返ってくるバージョンがあったのかもしれませんね…。
[…] 2017年11月30日 これだけだとスマホやタブレット環境のタップに反応しないので、こちらのサイトを参考に少し修正しました […]