読者です 読者をやめる 読者になる 読者になる

delegateでclickイベントを拾う場合のtap-highlight-color

iOSとかでリンクをクリックするときにグレイにハイライトされるけど、clickイベントでも特定の条件を満たせばハイライトされる(対象の要素がリフローしない場合とかだった気がするけど詳しくは覚えてない)。

ハイライトされるのはいいとして、delegate次のようにイベント貼ったとして

<div class="box">
  <span class="btn">click</span>
</div>
$('.box').delegate('.btn', 'click', function() {
  console.log('clicked!');
});

.btnをクリックすると.boxの領域がハイライトされて嬉しくない。

ハイライト出さなくてよければCSS

.box {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

とか指定すればいいんだけど、ハイライトは出したいけどクリックされた要素にちゃんとハイライト出したいという場合はこれじゃダメなので、delegateせずに.btnにclickイベント貼ることでしか解決しないかな。

$('.box .btn').click(function() {
  console.log('clicked!');
});

Backbone.Viewのeventsとかだと全部delegateになるし、けっこう困る。