25

私が抱えていたこの奇妙な問題を理解しようとしています.根本的な原因は、ライブクリックとトリガーの違い.click()です.

問題の詳細には触れませんが、基本的に入力ボタンをクリックすると正常に動作します(onclickイベントがあります)。しかし、(ボタンを物理的にクリックするのではなく) 別の場所から呼び出すと.click()、正しく機能しません。

私の質問は、ボタンの実際のクリックを真に再現する方法はありますか?

編集

問題: インライン PDF をロードする新しいウィンドウ (aspx ページ) を開いています。実際にリンクをクリックすると、ウィンドウが正常に開き、PDF が読み込まれます。.click()ウィンドウが開き、PDF ファイルをダウンロードするように求められます。プロンプトに関する Adob​​e Reader の設定、ブラウザの設定、およびレジストリの設定を確認してきました。 ）まったく違うことをしています。

4

4 に答える 4

21

問題を回避する方法について説明している以下を読む前に、そもそも問題が発生している理由を詳しく説明させてください。

Shift最新のブラウザは、どのマウス ボタンをクリックしたか、 / Ctrl/を押したかどうかなどに基づいて、リンクに対してさまざまなアクションを実行しますAlt。例として、Chrome では、リンクを左クリックする代わりに中クリックすると、ブラウザーは新しいタブでウィンドウを自動的に開きます。

を使用する場合.click()、jQuery はクリックした「方法」について仮定する必要があり、デフォルトの動作が得られますが、これは正しい動作ではありません。MouseEvents問題を解決するには、設定の形式でブラウザに「正しい」設定を指定する必要があります。

さて、それを修正する方法の短い議論に移りましょう:

パラメーターなしでjQuery の.click()イベントを使用している場合、これは実際には、問題の要素で「偽造クリック」ではありません。代わりに、 http : //api.jquery.com/click/ の jQuery ドキュメントによると:

....click()引数なしで呼び出された場合、.trigger("click") のショートカットです

つまり、$('#div1').click()起動すると、イベントの実際の jQuery ハンドラーがない場合'click'、デフォルトの処理が行われます。したがって、次の 2 つのケースを検討してください。

ケース 1 :

<a id='myLink' href='/some/link/'>Click me!</a>
<script type='text/javascript'>
    $('#myLink').click();
</script>

この最初のシナリオで.click()は、ハンドラーがないため、呼び出しは何もしません。イベントはトリガーされますが、それをキャッチして応答するものは何もありません。そのため、aタグのデフォルトの処理が使用され、ユーザーが使用され/some/link/ます。マウス ボタンやその他のパラメーターを指定していないため、これは真のデフォルトです。

ケース 2 :

<a id='myLink' href='/some/link/'>Click me!</a>
<script type='text/javascript'>
    $('#myLink').bind('click', function (ev) {
        ev.preventDefault();
        ev.stopPropagation();

        alert('you clicked me!');
    }).click();
</script>

このシナリオでは、clickハンドラーが作成されているため、ユーザーがリンクをクリックすると、ev.preventDefault()とのev.stopPropagation()呼び出しによって既定の処理が停止し、アラートが発生します。

ただし、この時点では-evを表すオブジェクトがありMouseEvents、必要に応じて設定を変更できます。たとえば、次のことができます。

ev.altKey = true; // Held Alt
ev.button = 1;    // Middle Mouse Button

これらの設定は、イベントを処理するデフォルトの方法を変更します。

jQuery 以外の代替ソリューション

次のコードを適用することで、ボタンのクリックを真にシミュレートすることもできます。

function fakeClick(event, anchorObj) {
  if (anchorObj.click) {
    anchorObj.click()
  } else if(document.createEvent) {
    if(event.target !== anchorObj) {
      var evt = document.createEvent("MouseEvents"); 
      evt.initMouseEvent("click", true, true, window, 
          0, 0, 0, 0, 0, false, false, false, false, 0, null); 
      var allowDefault = anchorObj.dispatchEvent(evt);
      // you can check allowDefault for false to see if
      // any handler called evt.preventDefault().
      // Firefox will *not* redirect to anchorObj.href
      // for you. However every other browser will.
    }
  }
}

(より完全な実装については、次の元の投稿を参照してください:アンカー タグへのクリックをシミュレートするにはどうすればよいですか? - そして、選択した回答を見てください)

これは実際には、ブラウザーのデフォルト ハンドラーと同じ方法でゼロからイベントを作成することにより、アンカー/スパンなどをマウスでクリックしたと信じ込ませるようにブラウザーを偽装しますが、一部の設定をオーバーライドすることができます。ただし、このアプローチはお勧めしません。クロス ブラウザー アプリケーションで問題が発生しやすく、すべてのパラメーターが何にマップされているかを把握する必要があるためです。

于 2012-06-20T20:59:12.687 に答える
15

この関数を使用して、マウス クリックを真に模倣します。

function clickLink(link) {
    var cancelled = false;

    if (document.createEvent) {
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent("click", true, true, window,
            0, 0, 0, 0, 0,
            false, false, false, false,
            0, null);
        cancelled = !link.dispatchEvent(event);
    }
    else if (link.fireEvent) {
        cancelled = !link.fireEvent("onclick");
    }
}
于 2012-06-20T20:47:48.513 に答える