web-dev-qa-db-ja.com

javascript / jqueryを使用して「a」要素のクリックをシミュレートする

要素のクリックをシミュレートしようとしています。同じためのHTMLは次のとおりです

<a id="gift-close" href="javascript:void(0)" class="cart-mask-close p-abs" onclick="_gaq.Push(['_trackEvent','voucher_new','cart',$(this).attr('rel')+'-mask_x_button-inaction']);" rel="coupon">&nbsp;</a>

どうすればクリックをシミュレートできますか。私が試してみました

document.getElementById("gift-close").click();

しかし、何もしていません

javascriptjqueryhyperlinkclicksimulate
57
user2373137

JQueryの使用：$('#gift-close').trigger('click');

JavaScriptの使用：document.getElementById('gift-close').click();

91
André Dion

ここで説明されているdocument.createEventを使用してみてください https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent

クリックをシミュレートする関数のコードは次のようになります。

function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var a = document.getElementById("gift-close"); 
  a.dispatchEvent(evt);      
}
15
ihor marusyk

JQueryの使用：

$（ '＃gift-close'）。click（）;
14
Alex Guerra

下のコードスニペット！

これらのドキュメントと例をMDNでご覧ください。答えが見つかります。これが適切な方法です。

イベントの作成とトリガー

ディスパッチイベント（例）

「ディスパッチイベント（例）」-HTMLリンク（クリックのシミュレーション）から取得：

function simulateClick() {

  var evt = document.createEvent("MouseEvents");

  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);

  var cb = document.getElementById("checkbox"); 
  var canceled = !cb.dispatchEvent(evt);

  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

これは私がそれをする方法です（2017 ..）：

MouseEvent を使用するだけです。

function simulateClick() {

    var evt = new MouseEvent("click");

    var cb = document.getElementById("checkbox");
    var canceled = !cb.dispatchEvent(evt);

    if (canceled) {
        // A handler called preventDefault
        console.log("canceled");
    } else {
        // None of the handlers called preventDefault
        console.log("not canceled");
    }
}

document.getElementById("button").onclick = evt => {
    
    simulateClick()
}

function simulateClick() {

    var evt = new MouseEvent("click");

    var cb = document.getElementById("checkbox");
    var canceled = !cb.dispatchEvent(evt);

    if (canceled) {
        // A handler called preventDefault
        console.log("canceled");
    } else {
        // None of the handlers called preventDefault
        console.log("not canceled");
    }
}
<input type="checkbox" id="checkbox">
<br>
<br>
<button id="button">Check it out, or not</button>
7
ravo10

すでに試したコード：

document.getElementById("gift-close").click();

...要素が実行時にDOMに実際に存在する限り機能します。それを確実にするためのいくつかの可能な方法が含まれます：

  1. ウィンドウのonloadハンドラーからコードを実行します。 http://jsfiddle.net/LKNYg/
  2. JQueryを使用している場合は、ドキュメント対応ハンドラーからコードを実行します。 http://jsfiddle.net/LKNYg/1/
  3. ソースhtmlの要素のafterであるスクリプトブロックにコードを配置します。

そう：

$(document).ready(function() {
    document.getElementById("gift-close").click();
    // OR
    $("#gift-close")[0].click();
});
7
nnnnnn

このコードを使用してクリックします：

$("#gift-close").click();
2
Farid Imranov

click()メソッド内に関数を追加してみてください。

$('#gift-close').click(function(){
  //do something here
});

空のままにするのではなく、click（）メソッド内で割り当てられた関数を使用して機能しました。

0
Neo