かもメモ

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

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;にする例など。。。
謎い! 結構闇が深そうでーす!!