Androidのタップ ハイライトについて
Androidのブラウザにて。Android 2.2 までと 2.3 で、アンカーやonclickイベントの付与された要素(エレメント)をタップした時に付くハイライトの挙動が変わっています。
Android 2.2 までは、以下のようになっているようです。
a) アンカーには、全てハイライトが付く。
b) onclickイベントが付与された要素には、ハイライトが付く。
c) 親要素にonclickイベントが付与されている場合、子要素にクリック可能な要素(アンカータグ、またはonclickイベントが付与された要素)が "1つしか存在しない場合" は、親要素がハイライトされる。2つ以上クリック可能な要素がある場合には、個別にハイライトされる。
a) ・ b) はいいとしよう。ハイライトを見せたくない場合には、以下のCSSで消すことができます。
-webkit-tap-highlight-color: rgba(0,0,0,0);
c) については、具体例を挙げると、
<div id="oya" onclick="hoge();"> <a href="hoge.html">兄</a> | <a href="hoge.html">弟</a> </div>
上記の場合は、「兄」と「弟」がそれぞれハイライトされます。これは問題ない。
<div id="oya" onclick="hoge();"> <a href="hoge.html">子供</a> </div>
上記の場合、「子供」をタップしても、<div id="oya">〜</div>がハイライトされてしまいます。子要素のonclickイベントで、event.stopPropagation();(イベントのバブリングを中断)するようなケースもよくあるので、これは困った仕様ですね。
なんでこんな仕様にしてしまったのだろう・・・。ますますAndroidが発展途上のOSに思えてくる。
ちなみに、Android 2.3からは仕様が変わっています。