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

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

iPhone aタグでclickイベントが効かない時があるっぽい!

iPhone用のサイトを作っていて、aタグに付けたclickイベントがchromeデベロッパツールで確認した時は動作しているのに、実機では動作しないという現象に出会ったのでメモです。

今回はボタンクリックでモバイル用のメニューを表示させるような機能を作っていました。

動作しない例

// HTML
<a  id="navToggleBtn">
  <i class="fa fa-baes"></i>
</a>
// javascript
$('document').on('click', '#navToggleBtn', function(evt) {
  // メニューを開いたり閉じたりする処理
});

一見特に問題ないように思えます。そして、チェックしていたchromeデベロッパツールでのスマートホン表示でも問題なく動作していました。

さりとて!いざiPhone実機で試してみると動いているページと動いてないページが有る...
最初はCSSに何か違いができているのかと当たってみたのですが特に違いはありませんでした。

クリックイベントが無視されてるっぽい!?

確かスマートフォンではClickイベントの前にTouchイベントが発生しているので、Touchイベントでreturn false;的なアレでイベントの伝播が止まってしまってるのではないかと考えました。
だとしたらデフォルトのaタグの挙動を止めてしまえばOKな気が...

// HTML
<a  id="navToggleBtn" href="javascript:void(0);">
  <i class="fa fa-baes"></i>
</a>

javascriptは特に変更せず、aタグのhrefをjavascript:void(0);にして見たところiPhone実機でも想定していた挙動になりました。もしかしてそもそもhref属性がなかったのが問題だったのかも!?

調べてると色々ありました。

同じようにhref="javascript:void(0);"とする例や、csscursor: pointer;にする例など。。。
謎い! 結構闇が深そうでーす!!


SHIROBAKO ~上山高校アニメーション同好会~ (1) (電撃コミックスNEXT)

SHIROBAKO ~上山高校アニメーション同好会~ (1) (電撃コミックスNEXT)