JavaScriptでX、Y座標を使用してクリックをシミュレートする方法は?


93

Webページ内のJavaScriptのクリックをシミュレートするために特定の座標を使用することは可能ですか?


2
あなたの目標は何ですか?:)たとえば、イメージマップのクリックをシミュレートしようとしていますか?
Nick Craver

回答:


145

これは実際のクリックとは異なりますが、クリックイベントを送出できます。たとえば、クロスドメインのiframeドキュメントをだまして、クリックされたと思わせることはできません。

最新のすべてのブラウザがサポートdocument.elementFromPointHTMLElement.prototype.click()、少なくともIE 6、Firefox 5以降、すべてのバージョンのChrome、そしておそらくすべてのバージョンのSafariが気になる可能性があります。リンクをたどってフォームを送信することもできます:

document.elementFromPoint(x, y).click();

https://developer.mozilla.org/En/DOM:document.elementFromPoint https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click


1
@RadiantHex:はい、実際にはIEが最初に実装され、IE6にまで遡ります。Chrome、Firefox、Safari 5の実装は問題ありませんが、Safari 4とOperaは正しく機能しません(実行可能です)。quirksmode.org/dom/w3c_cssom.html#documentviewを参照してください。
アンディE

1
私はこの発見にとても満足しています!! = D今では不可能と思われる多くのことを可能にします=)...または少なくともそれほど複雑ではありません。ありがとう!!
RadiantHex 2010

1
これは$ .live()イベントでは機能しないようですが、$。live()で作成されたイベントでも機能させる方法はありますか?
ActionOwl 2011

1
@AndyEこれは現在、次の条件で動作しています。Webページがあり、自分のドメイン以外のドメインからIframeをロードしています。そして、iframeエリアをクリックしたいです。これに関する解決策はありますか?
Parixit 2013年

2
@parixit:いいえ、できません。iframeのクリックをシミュレートできますが、それは含まれているドキュメントまで伝播するだけです。含まれているドキュメントには影響はありません(非常に明らかなセキュリティ上の理由から)。
アンディE

67

はい、イベントを作成してそれをディスパッチすることにより、マウスクリックをシミュレートできます。

function click(x,y){
    var ev = document.createEvent("MouseEvent");
    var el = document.elementFromPoint(x,y);
    ev.initMouseEvent(
        "click",
        true /* bubble */, true /* cancelable */,
        window, null,
        x, y, 0, 0, /* coordinates */
        false, false, false, false, /* modifier keys */
        0 /*left*/, null
    );
    el.dispatchEvent(ev);
}

click要素でメソッドを使用する場合は注意してください。これは広く実装されていますが、標準ではなく、PhantomJSなどでは失敗します。jQueryの実装は.click()正しいことだと思いますが、確認していません。


混乱から私を救った。私の最初の方法は失敗しましたが、これが助けになりました、ありがとう。
iChux 2014年

3
jQueryを使用しない場合はplus1。受け入れられた答えに反して、これ質問に答えます。
tomekwi

1
これはjQueryよりはるかに強力です$.click()
Steven Lu

7
initMouseEvent廃止されました:developer.mozilla.org/en-US/docs/Web/API/MouseEvent/...を
vikeri

3
非推奨代わりにinitMouseEvent、あなたは使用することができますvar event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )。これはまたに示されているstackoverflow.com/a/36144688/384670
Mカッツ

28

これはtorazaburoの答えであり、MouseEventオブジェクトを使用するように更新されています。

function click(x, y)
{
    var ev = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true,
        'screenX': x,
        'screenY': y
    });

    var el = document.elementFromPoint(x, y);

    el.dispatchEvent(ev);
}

0

それは私にとってはうまくいきませんが、正しい要素をコンソールに出力します

これはコードです:

function click(x, y)
{
    var ev = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true,
        'screenX': x,
        'screenY': y
    });

    var el = document.elementFromPoint(x, y);
    console.log(el); //print element to console
    el.dispatchEvent(ev);
}
click(400, 400);

-2

セキュリティ上の理由から、JavaScriptを使用してマウスポインターを移動したり、クリックをシミュレートしたりすることはできません。

あなたが達成しようとしていることは何ですか?


@Aicule:教えてくれてありがとう!質問に少し情報を追加します。私は実験しているだけで、実際に生産的なものはありません=)
RadiantHex

2
ChromeとSafariでは、特定のX、Y位置でクリックを発生させることができます。これがこのデモの仕組みです。Firefoxが失敗する唯一のブラウザーであるため、Firefox固有のセキュリティポリシーである可能性があります。
thdoan

真実は以下の答えにあります、createEvent()+initMouseEvent()
Valer

1
私の場合、テストしています。
Jose Nobile 2017

特定のX / Y座標でクリックを確実にシミュレートできますが、まったく同じようには動作しません。
アガメムス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.