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
属性がなかったのが問題だったのかも!?
調べてると色々ありました。
- clickイベントが効かない人への処方箋(iPhone&jQuery) | yamashitakoji.com
- iPhoneのclickイベントの挙動 - to-R
- http://blog.roundrop.jp/show/28
同じようにhref="javascript:void(0);"
とする例や、cssでcursor: pointer;
にする例など。。。
謎い! 結構闇が深そうでーす!!
SHIROBAKO ~上山高校アニメーション同好会~ (1) (電撃コミックスNEXT)
- 作者: ミズタマ,武蔵野アニメーション,杉原研二
- 出版社/メーカー: KADOKAWA/アスキー・メディアワークス
- 発売日: 2015/01/24
- メディア: コミック
- この商品を含むブログ (3件) を見る