3

ページで「ズームイン」アイコンをプログラムで3回クリックしようとしています。は次の<a>ように構成されています。

<a class="get-plus" title="zoom in" href="javascript:void(0)" style="display: inherit;">&nbsp;</a>

ドキュメントの準備ができたときに呼び出される次のコードがあります。

function zoomIn() {
    // Zoom in 
    for (var i = 0; i < 3; i++) {
        $('a.get-plus').trigger('click');
        alert(i);
    }
}

ループが機能しているというアラートが表示されますが、ズーム機能が機能していません。これを修正する方法やより良い方法がわかりませんか?

4

2 に答える 2

3

クリック イベントをトリガーする方法が機能しません。

代わりにHTMLElement.click()を使用します。

HTMLElement.click() メソッドは、要素のマウス クリックをシミュレートします。

サポートされている要素 (タイプの 1 つなど) で click() を使用すると、要素のクリック イベントが発生します。このイベントは、ドキュメント ツリー (またはイベント チェーン) の上位の要素にバブルアップし、それらのクリック イベントを発生させます。1 つの例外: click() メソッドは、実際のマウス クリックが受信されたかのように要素にナビゲーションを開始させません。

したがって、次のように変更します。

$('a.get-plus').trigger('click');

に：

$('a.get-plus').get(0).click();

例：

function zoomInChanged() {
  // Zoom in
  for (var i = 0; i < 3; i++) {
    setTimeout(function () {
      $('a.get-plus').get(0).click();
    }, i * 1000);
  }
}

function zoomIn() {
  // Zoom in
  for (var i = 0; i < 3; i++) {
    $('a.get-plus').trigger('click');
    console.log(i);
  }
}

console.log('zoomIn:');
zoomIn();
console.log('zoomInChanged:');
zoomInChanged();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a class="get-plus" title="zoom in" href="javascript:console.log('Clicked')" style="display: inherit;">&nbsp;</a>

もっと読む：

jQuery のイベント処理システムは、ネイティブ ブラウザー イベントの上にあるレイヤーです。.on( "click", function() {...} ) を使用してイベント ハンドラーを追加すると、jQuery の .trigger( "click" ) を使用してトリガーできます。これは、jQuery が最初に追加されたときにそのハンドラーへの参照を格納するためです。 .

さらに、onclick 属性内で JavaScript をトリガーします。

.trigger() 関数を使用して、ファイル入力ボックスやアンカー タグのクリックなどのネイティブ ブラウザ イベントを模倣することはできません。これは、これらのイベントに対応する jQuery のイベント システムを使用してアタッチされたイベント ハンドラーがないためです。

于 2017-01-06T21:28:32.020 に答える
0

<a href="javascript:void(0)">何かをクリック可能にするために使用されるハックですが、ユーザーを新しいページに移動することはありません。ズーム機能とはまったく関係ありません。

何らかのライブラリまたはプラグインを使用して、画像をズーム可能にする可能性が最も高いでしょう。ドキュメントを読んで、ライブラリがプログラムでズームをトリガーする方法を提供しているかどうかを確認する必要があります。

于 2017-01-06T21:25:02.887 に答える