jQueryまたはJavascriptを使用してHTML5をトリガーする

Question

押されたときにアンカーをダウンロードしているイメージをHTMLコードでダウンロードすると予想されました。

$('.foo').on('click', function() { 
 
    $('a').trigger('click'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="//www.gravatar.com/avatar/b6640a9a125eb5cf2bc47ddc17b8ee7a?s=328&d=identicon&r=PG" download>Click here to download image</a> 
 
<button class="foo"> 
 
I expected this button to download also de image 
 
</button>

Answer 1

あなたはDOM要素にclickを呼び出す必要があります。

$('.foo').on('click', function() { 
 
    $('a')[0].click(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="//www.gravatar.com/avatar/b6640a9a125eb5cf2bc47ddc17b8ee7a?s=328&d=identicon&r=PG" download>Click here to download image</a> 
 
<button class="foo"> 
 
I expected this button to download also de image 
 
</button>

Answer 2

同様triggering-event-handlersで文書化：

jQueryのイベント処理システムはネイティブブラウザイベントの上の層です。 .on（ "click"、function（）{...}）を使ってイベントハンドラを追加すると、jQueryの最初の追加時にそのハンドラへの参照が格納されるため、jQueryの.trigger（ "click"）を使ってトリガすることができます。さらに、onclick属性内でJavaScriptをトリガーします。 .trigger（）関数を使用して、ファイル入力ボックスやアンカータグをクリックするなどのネイティブブラウザイベントを模倣することはできません。これは、これらのイベントに対応するjQueryのイベントシステムを使用してイベントハンドラがアタッチされていないためです。 （）を.triggerない場合、私は、ネイティブブラウザのイベントを模倣することができますどのように

：このことから

？ ネイティブブラウザイベントをトリガーするには、< IE9ではdocument.createEventObjectを、他のすべてのブラウザーではdocument.createEventを使用する必要があります。これらの2つのAPIを使用すると、誰かが実際にファイル入力ボックスをクリックした場合とまったく同じように動作するイベントをプログラムで作成できます。デフォルトのアクションが実行され、ブラウズファイルダイアログが表示されます。

自動テストに使用するネイティブブラウザイベントを簡単にするために、jQuery.simulate.jsがjQuery UIチームによって作成されました。 その使用法は、jQueryのトリガーの後にモデル化されます。

このjQueryプロジェクトはもうアクティブではありませんが、いずれにしても非常に興味深いものです。したがって

：

$(function() { 
 
    $('.foo').on('click', function() { 
 
    $('a').simulate('click'); 
 
    }) 
 
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
<script src="https://cdn.rawgit.com/jquery/jquery-simulate/master/jquery.simulate.js"></script> 
 

 
<a href="//www.gravatar.com/avatar/b6640a9a125eb5cf2bc47ddc17b8ee7a?s=328&d=identicon&r=PG" download>Click here to download image</a> 
 
<button class="foo"> 
 
    I expected this button to download also de image 
 
</button>