27428


HTML5で作成したWebページをアプリ化したいと考えて、Monacaを試しております。  
そこで１点、正しく動作しない箇所がありましたので質問させてください。

あるボタンをクリック時に、`<input type="file" accept="image/*"
/>`のクリックイベントをトリガーで呼び出すようにしました。  
chromeでは期待した通りの動作なのですが、iPhoneで確認したところ、うまく動作しませんでした。  
元々のHTML5のWebページでは、iPhoneでも正しく動作しています。

また２回続けてトリガーすると正しく動作しました。

Androidでは未確認です。

この現象がなぜ起こるのかと、回避方法（iOSだったら２回トリガーするという方法で正しいのかどうか）をご教授願えればと思います。  
よろしくお願い致します。

[code]

    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');
        });
    });
    
[/code]


CC BY-SA 3.0
2016-06-23T06:32:46.997
26991
2016-07-07T11:09:24.507
2016-06-23T07:05:09.377
16925
16925
question
monaca jquery
trigger時の動作の違いについて


iOSで2回トリガーすれば動作はするようですが、あまり良い方法ではないと思います（他に方法がなければ、バッドノウハウとして使うのは構わないと思います）  
自分でも試してみたところ、キャンセル不能なイベントとしてディスパッチすれば、iOSでも正常に動作するようです。  
サンプルコードは

[code]

    $('#button_a').on('click', function() {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("click",true,false);
        document.querySelector('input[type="file"]').dispatchEvent(evt);
    });
    
[/code]

です。  
evt.initEventの第三引数をfalseにしているところがポイントで、cancelできないイベントとして指定することで、iOSでもうまく動作するようになりました。  
jQueryではこのような指定は出来ないようなので、ちょっと対応するコードは分かりません。（誰かjQueryに詳しい方、分かればフォローお願いします）


CC BY-SA 3.0
2016-07-07T11:09:24.507
27428
2016-07-07T11:09:24.507
8848
26991
answer