質問: HTML5で作成したWebページをアプリ化したいと考えて、Monacaを試しております。 そこで1点、正しく動作しない箇所がありましたので質問させてください。 あるボタンをクリック時に、``のクリックイベントをトリガーで呼び出すようにしました。 chromeでは期待した通りの動作なのですが、iPhoneで確認したところ、うまく動作しませんでした。 元々のHTML5のWebページでは、iPhoneでも正しく動作しています。 また2回続けてトリガーすると正しく動作しました。 Androidでは未確認です。 この現象がなぜ起こるのかと、回避方法(iOSだったら2回トリガーするという方法で正しいのかどうか)をご教授願えればと思います。 よろしくお願い致します。 ``` ons.ready(function() { // iPhoneでは動作しない $('#button_a').on('click', function() { $('input[type="file"]').trigger('click'); }); // iPhoneで正しく動作する $('#button_b').on('click', function() { $('input[type="file"]').trigger('click').trigger('click'); }); }); ```
回答: iOSで2回トリガーすれば動作はするようですが、あまり良い方法ではないと思います(他に方法がなければ、バッドノウハウとして使うのは構わないと思います) 自分でも試してみたところ、キャンセル不能なイベントとしてディスパッチすれば、iOSでも正常に動作するようです。 サンプルコードは ``` $('#button_a').on('click', function() { var evt = document.createEvent("HTMLEvents"); evt.initEvent("click",true,false); document.querySelector('input[type="file"]').dispatchEvent(evt); }); ``` です。 evt.initEventの第三引数をfalseにしているところがポイントで、cancelできないイベントとして指定することで、iOSでもうまく動作するようになりました。 jQueryではこのような指定は出来ないようなので、ちょっと対応するコードは分かりません。(誰かjQueryに詳しい方、分かればフォローお願いします)