Clickイベントに関すること開発CSSiPhone最近、はてなブックマークで「スマートフォンブラウザ不具合特集」というのを見つけました。知らなかったのもいくつかあったのですごく参考になりましたよ。Android系は私も認識していないことが多いので、その辺りをきちんと見てる人はすごいなぁと思います。3年前ぐらいに比べると、あっという間にAndroidが多機種化してきて、あっという間にガラケーチェック時代っぽくなりましたね。Safariから使えるようになったHTML5・CSSを試してみました【前編】」でも、iPhoneで上手くいかない事例について少し触れていました。iPhoneだとLabel要素をタップしてInput要素(例えばチェックボックスなど)を操作できないというものです。この解決方法はlabel要素に空のonclick属性をつけることで解決できます。簡単なチェックページを作ってみました。Test少しマニアックな事例ではありますが、最近jQueryをつかってスマートフォンブラウザ向けのサイトを作っていて気づいたことがあります。jQueryにはイベントをバインドするメソッドがいくつかありますが、そのメソッドによってはタップに反応する領域が変わるというものです。jQueryのイベントバインドにおける問題jQueryでclickイベントをバインドしたいと思った場合、以下の6つのメソッドが使えると思います。Androidなどで見てください。Bindのテストページテスト用のページには以下のようなコードが書かれています。oneでバインドしたElementは、本来意図していない要素にもタップイベント(iPhoneの場合、タップすると半透明のグレイがかかる)が発生するようになります。テスト用のページの場合、ボタン(a要素)の下の何もない青色地のスペースをタップしてみるとわかりやすいです。jQueryを詳しく読んでみることにします。最新のjQuery(v.1.7.2)でこれら該当箇所ののソースコードを読んでみると、.on()に集約されているのが分かります。);」というのを見つけることができます。対象元となるエレメントである$('#delegate')や$('#on')、$('#one')にも空のclickイベントがバインドされるとわかりました。Chromeのデベロッパーツールでも確認することができます。変な領域までタップで反応しないようにするには、.bind()メソッドなどでバインドする方法に変更するのが手っ取り早いです。後は、簡易的に対処する方法があります。rgba(0,0,0,0)」と指定することにより一見タップイベントに反応しなくなったようにみせることができます。「-webkit-tap-highlight-color」はAndroidでの実装がまちまちだったりするので、あまりおすすめできません。Elementsの項を参照してください。テスト用に作ったページでは、最下部に設置したボタンを押すと「-webkit-tap-highlight-color」のスタイルが当たるようにしています。iPhoneではうまくいっているように見える感じになりますが、Androidは機種によってはおかしな挙動になることが分かりますので、そちらも見てみてください。Blog|ブログを報告する。