web-dev-qa-db-ja.com

JavaScriptの要素をプログラムでクリックするにはどうすればよいですか？

IEでは、JavaScriptからelement.click（）を呼び出すことができます。Firefoxで同じタスクを実行するにはどうすればよいですか？理想的には、クロスブラウザで同等に機能するJavaScriptが欲しいのですが、必要に応じて、ブラウザごとに異なるJavaScriptを用意します。

javascriptfirefoxdomjavascript-eventsdhtml
57
Bruce

document.createEvent documentation は、「createEventメソッドは非推奨です。代わりに event constructors を使用してください。」

したがって、代わりにこのメソッドを使用する必要があります。

var clickEvent = new MouseEvent("click", {
    "view": window,
    "bubbles": true,
    "cancelable": false
});

そして、次のような要素でそれを起動します：

element.dispatchEvent(clickEvent);

here のように。

69
Iulian Onofrei

Firefoxの場合、リンクは「特別」であるように見えます。これを機能させるための唯一の方法は、createEvent MDNで説明 を使用して、initMouseEvent関数を呼び出すことでした。それでも完全には機能しませんでしたが、手動でブラウザにリンクを開くように指示する必要がありました...

var theEvent = document.createEvent("MouseEvent");
theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var element = document.getElementById('link');
element.dispatchEvent(theEvent);

while (element)
{
    if (element.tagName == "A" && element.href != "")
    {
        if (element.target == "_blank") { window.open(element.href, element.target); }
        else { document.location = element.href; }
        element = null;
    }
    else
    {
        element = element.parentElement;
    }
}
30
will

jQuery を使用すると、次のようにまったく同じことができます。

$("a").click();

これにより、ページ上のすべてのアンカーが「クリック」されます。

22
Jake McGraw

element.click（）は、 W3C DOM仕様 で概説されている標準メソッドです。 MozillaのGecko/Firefox 標準に従う であり、INPUT要素でのみこのメソッドを呼び出すことができます。

10
Bjorn Tipling

実際にリンクをたどるか、onclickをトリガーしようとしていますか？次のようなものでonclickをトリガーできます。

var link = document.getElementById(linkId);
link.onclick.call(link);
8
jiggy

クロスブラウザーの機能（クリックハンドラー以外にも使用可能）は次のとおりです。

function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
}
7
KooiInc

上記のKooiIncの関数を使用しましたが、IEに1つの「ボタン」、FireFoxに1つの「送信」の2つの異なる入力タイプを使用する必要がありました。

// HTML

<input type="button" id="btnEmailHidden" style="display:none" />
<input type="submit" id="btnEmailHidden2" style="display:none" />

// JavaScriptで

var hiddenBtn = document.getElementById("btnEmailHidden");

if (hiddenBtn.fireEvent) {
    hiddenBtn.fireEvent('onclick');
    hiddenBtn[eType]();
}
else {
    // dispatch for firefox + others
    var evObj = document.createEvent('MouseEvent');
    evObj.initEvent(eType, true, true);
    var hiddenBtn2 = document.getElementById("btnEmailHidden2");
    hiddenBtn2.dispatchEvent(evObj);
}

私は検索し、多くの提案を試みましたが、これがうまくいきました。もう少し時間があれば、なぜサブミットがFFおよびボタンでIEで動作するのかを調査したいと思いますが、それは次の問題に今のように贅沢です。

1
krm