JavaScriptでクリックをシミュレートする方法は?


291

JavaScriptを使用して要素のクリックをシミュレートする方法を知りたいだけです。

現在私は持っています:

<script type="text/javascript">
function simulateClick(control)
{
    if (document.all)
    {
        control.click();
    }
    else
    {
        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
        control.dispatchEvent(evObj);
    }
}
</script>

<a href="http://www.google.com" id="mytest1">test 1</a><br>

<script type="text/javascript">
    simulateClick(document.getElementById('mytest1'));
</script>

しかし、それは機能していません:(

何か案は?


9
「5つの最も一般的なコーディングエラー」:javascript.about.com/od/hintsandtips/a/worst_4.htm-IE4を実行する人がほとんどいないため、document.all DOMのサポートは不要になりました。コーディングでいまだに何人が使用しているのかは驚くべきことです。さらに悪いことに、document.all DOMのサポートは、使用されているブラウザーを判別するためにテストされることが多く、サポートされている場合、コードはブラウザーがInternet Explorerであると想定します(OperaもDOMを認識するため、これは完全に間違った使用方法です)。 。
zaf

回答:


418

これが私が調理したものです。とてもシンプルですが、うまくいきます:

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);
  }
}

使用法:

eventFire(document.getElementById('mytest1'), 'click');

12
@アンダーソン・グリーン:このjsfiddleに例を追加しました:jsfiddle.net/KooiInc/W4BHD
KooiInc

4
これが機能することの証明(Chromiumの場合):+1とdocument.querySelector('[value="2706236"]').nextSibling.nextSibling.dispatchEvent(ev);:)
PointedEars

58
まあ私は投票ボタンであなたのjavaスクリプトを試してみました:)(もちろん働いていました)
0fnt

1
正確なユーザーの行動をシミュレートするには、ラップする必要があるdispatchEventclickとの呼び出しをsetTimeout表示される、dispatchEventある同期
Lev Kazakov

16
Event.initEvent非推奨になりました developer.mozilla.org/en/docs/Web/API/Event/initEvent
artnikpro 2017年

392

次のような単純なものはどうですか?

document.getElementById('elementID').click();

IEでもサポートされています。


@HermannIngjaldssonはい、それはIEで完璧に動作します- msdn.microsoft.com/en-us/library/ie/ms536363%28v=vs.85%29.aspx
ダレン・スウィーニー

6
問題は、「IEでも機能するか」ということでした。-答えは「はい」です-AFAIKは少なくとも8まではチェックしていません7
ダレンスウィーニー

24
これは以前に存在しませんでしたか?2010年の回答でこの単純なソリューションが言及されなかったのはなぜですか?ちょうど好奇心が強い...
Parth

3
@NinoŠkopac現在のところデスクトップで問題なく動作しますが、モバイルブラウザーでの動作は保証されません。mozilla開発者サイトでさえ、モバイルサポートは表示されません。
le0diaz 2016

8
@Parth多分それはそうしました、それは彼らのためにクリックしませんでした。
アンドリュー

78

すべてのブラウザー検出を回避するためにjQueryの使用を検討しましたか?jQueryを使用すると、次のように簡単になります。

$("#mytest1").click();

21
これはデフォルトの動作ではなくjQueryイベントハンドラーのみを起動します(その場合、ブラウザーはhrefに移動します)
Romuald Brunet

12
悲しいことはわかりませんが、同じブラウザ検出ルーチンを何度も記録し直す必要がないことは確かに便利です。
BradBrening 2013年

9
@ErikAigner:私は同じことを考えていましたが、この場合の受け入れられた答えがjQueryではなくプレーンJavaScriptであることをうれしく思います。SOでそれを何度も見た。もう一度:jQueryはJavaScriptですが、JavaScriptはjQueryではありません。私はjQueryを使用するのが好きですが、開発者が本当のことを理解していないことがますます増えています。私の2セントはコメントするのに抵抗できませんでした。;)
サンダー2013

58
大多数の世帯が洗濯機を所有しており、ほとんどの人が衣類乾燥機を持っているため、手で洗濯する必要がある場合、どこから始めればよいかわからない人もたくさんいます。jQueryは、最新のアプライアンスと同様に、古い雑用をはるかに簡単にし、エラーを起こしにくくしました。それは誰にとっても解決策ではありませんが、クロスブラウザ互換である一方で、より簡潔で理解しやすい構文を使用して質問に正確に答える回答に反対票を投じることは、逆に思えます。+1。
FreeAsInBeer 2013

2
@FreeAsInBeerまた、運転がとても簡単なので、どこにも歩いてはいけません。しかし、それはばかげていることはわかっています。遠くまで行く必要がないなら歩く。単純なことをする必要があり、それを行うためにライブラリ全体をロードしたくない場合は、プレーンJavaScriptを使用します。単純なもののためにガス/帯域幅を無駄にする必要はありません。
Jacob Alvarez

18
var elem = document.getElementById('mytest1');

// Simulate clicking on the specified element.
triggerEvent( elem, 'click' );

/**
 * Trigger the specified event on the specified element.
 * @param  {Object} elem  the target element.
 * @param  {String} event the type of the event (e.g. 'click').
 */
function triggerEvent( elem, event ) {
  var clickEvent = new Event( event ); // Create the event.
  elem.dispatchEvent( clickEvent );    // Dispatch the event.
}

参照


私はこれが今日の最良の答えになるはずだと信じています
DavidTaubmann '

15

jQueryを使用すると、スペースを節約できます。あなただけを使用する必要があります:

$('#myElement').trigger("click")

10
OPはJavaScriptを要求しました。これはコンパクトで機能的ですが、jQueryなどよりもライブラリなしのJSを好む人もいます。
カーカス

43
jqueryをダウンロードしてスペースを節約しますか?
MH

9
組み立てを好む人もいます。
Dan Nissenbaum、2016

@MHもっと有効な議論は「シンプルに保つ」ことだと思います。ここでのSOのデフォルトプロファイルは、jQueryとほぼ同じサイズです。
adelriosantiago

7

一番の答えは最高です!ただし、Firefoxの場合、マウスイベントはトリガーされませんでしたetype = 'click'

だから、私はに変更document.createEvent'MouseEvents'、それが問題を修正しました。追加のコードは、別のコードがイベントを妨害しているかどうかをテストすることです。キャンセルされた場合は、コンソールにログを記録します。

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent(etype, true, false);
    var canceled = !el.dispatchEvent(evObj);
    if (canceled) {
      // A handler called preventDefault.
      console.log("automatic click canceled");
    } else {
      // None of the handlers called preventDefault.
    } 
  }
}

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.