jQueryプログラムでjavascript：void（0）

Question

を持つタグをプログラムでクリックします。プログラムで「拡大」アイコンをページ上で3回クリックしようとしています。 <a>が構成されています

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

I持って準備ができて文書に呼び出され、次のコード、：

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

私はアラートループ動作しますが、ズーム機能が動作していないこと、わからない取得どのように修正するか、これを改善するための方法？

Answer 1

クリックイベントを発生させる方法は機能しません。

代わり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>

を

More reading：

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

さらに、JavaScriptはonclick属性内でトリガされます。

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

Answer 2

<a href="javascript:void(0)">は、何かをクリックできるようにするためのハックですが、ユーザーを新しいページに移動させることはありません。これは決してあなたのズーム機能に関連していません。

ほとんどの場合、画像を拡大表示できるようにするために、ライブラリやプラグインを使用しています。ドキュメントを読んで、ライブラリがプログラムでズームをトリガする方法を提供しているかどうかを確認する必要があります。