タッチデバイスのコーディングに.on()を使ったらタップハイライトの位置で悩んだ

今回は、スマホ・タブレットに対応するサイトを作るときに気をつけよう！となった、jQueryでクリックの処理をつけるときのお話です。 

.on()を使ったら何が起きたのか 

.on('click')でボタンに処理を書きました。

こんなんがありまして。

通常はこのようになります。

だがしかし、

どうしてこうなった！

ここでの外側というのがbodyレベルの大枠だったんです。

なので、ハイライトが画面全体に出ていたらしく、なにも反応がないように見えてしまっていました。処理が"クリックしてモーダル表示"だったので尚更だった。

思った通りにハイライトがつく箇所と、つかない箇所があった

実際には、このようなbtnになっているものが複数ありまして。

その中でなぜか「このページのだけハイライト出ないね。」という事が起きました…

同じだよ？何が違うのさ〜(´・ω・｀)

同じじゃなかったのさ…！

▼OK

$(".btn").cick(function(){…

$(".btn").on('click',function(){…

▼NG

$(".wrap").on('click','.btn',function(){…

NGの方の書き方、セレクター指定の仕方がちょっと違いますね。

普通に書くとボタン（.btn）に処理を付けてやりますが、NG側の書き方は、外側（.wrap）の中のボタン（.btn）に付ける、という書き方になります。

こ　れ　や　

最終的に指定されているのは'.btn'ですが、かかっているのは$('.wrap')です。

だからそっちにハイライトが反応しているんですね！「ああ、うん、わかるわ…」と思いつつ、タップの反応って、発動させるセレクターについてるんじゃないんだ〜という事を改めて認識してびっくり。

割と、なんでだよう！と思って検証していたので、気付いて数分間は、「そりゃそうか…そうだよね…いやでも…えーそうなの…」という感じでした。

なるほどねー。

ちなみに、なぜこの書き方をしていた箇所があったかというと、非同期処理を使って生成・表示をしていたから。

.on() | Qrefy - jQuery日本語リファレンス

このメソッドは呼び出し元のjQueryオブジェクトの要素にハンドラをバインドするため、その対象要素はメソッドを呼び出す時点でページ上に存在していなければなりません。

上で、「NG側」なんて書きましたが、処理自体は全然ダメな書き方ではないです。後から生成した要素にもまとめてクリックの処理を付けるための、スマートな書き方だと思います。

ただ、タッチデバイスだとこのようにハイライトが付いてしまうというのが、今回では困ったことになってしまったということでした。

最終的には、要素を生成する時やした後などにむにゃむにゃ色々付け加えて対応( ˘ω˘)

若干冗長な処理にはなりましたが、無事、思った通りの位置にハイライトを表示するようにしました。

ハイライト表示は大事だと思う

タッチデバイスのタップハイライトって、やっぱり操作に対してのフィードバックとしてとても大事だし、使い心地にも関わってきます。

バグとかではないので、「ハイライト非表示」なんかで対応するのではなく、きちんと気を遣っていければいいですね。