スマホ、タブレット等のタッチデバイスでボタンに疑似クラスhover を使うと1クリックで実行できないです。
目次
hover使うとパソコンでは1クリック、スマホでは2クリック必要になる
疑似クラス hover を使ったボタンクリックのサンプルです。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
マウスオーバーで赤色 <br> マウスのプッシュで青色 <br> <body> <div id="btn1" class="button" href="#" >ボタン1</div> <br> <div id="btn2" class="button" href="#" >ボタン2</div> </body> |
JavaScript
|
1 2 3 4 5 6 7 |
$('#btn1').on('click',function() { window.alert('ボタン1が押された'); }); $('#btn2').on('click',function() { window.alert('ボタン2が押された'); }); |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.button { display: inline-block; padding: 5px 10px; background-color: green; color: white; border: 1px solid; text-decoration: none; font-size: 20px; } .button:hover { background-color: red; cursor: pointer; } .button:active { background-color: blue; } |
実行例
↓jsfiddleの実行例
・https://jsfiddle.net/urashita/306jhLa1/73/
タブレットやスマホでマウスオーバーがないのでontouchstart=""を使う
タブレットやスマホでボタンにマウスオーバーを指定していると、1回タップしただけでは実行せず、2回タップして初めて実行されることがあります。
これは、1回目のタップでボタンにフォーカスが当たるようです。
この問題を解決するには、タッチさせる要素に ontouchstart=""と指定する。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
マウスオーバーで赤色 <br> マウスのプッシュで青色 <br> <body> <div id="btn1" class="button" href="#" ontouchstart="">ボタン1</div> <br> <div id="btn2" class="button" href="#" ontouchstart="">ボタン2</div> </body> |
実行例
↓jsfiddleの実行例
・https://jsfiddle.net/urashita/306jhLa1/74/
コメント