ページの指定座標をクリックする みたいなことはできるか？

Question

デベロッパーツールのJSコンソールから、inputに文字を入力する。keyboard　eventを発火させるまではわかったのですが、クリック処理と言うのはできないのでしょうか。

気になること
①ページの指定座標をクリックする　という処理はできるのか？

②ページのbuttonタグの付いたエレメント（？）をクリックする　という処理はできるのか？

③ページのbuttonタグ以外のエレメント（？）をクリックする（画像をクリックしてOnclickEventを発火させるみたいな）　という処理はできるのか？

Comments

[退会済みユーザー]

回答は出揃ってると思うが、いかがだろう。
解決済みにしては。

Answer 1

はい、可能です.

①ページの指定座標をクリックする　という処理はできるのか？

document.elementFromPointメソッドを用いて指定した座標下の最前面にある要素を取得し, dispatchEventメソッドでイベントを着火します.

②ページのbuttonタグの付いたエレメント（？）をクリックする　という処理はできるのか？

querySelectorAllメソッドなどを用いてクリック対象の要素を入手し, dispatchEventメソッドを用いてイベントを着火します.

③ページのbuttonタグ以外のエレメント（？）をクリックする（画像をクリックしてOnclickEventを発火させるみたいな）　という処理はできるのか？

上の②と同様です.

---

下記にscript要素を用いた例を示します.

<input type="button" value="自動クリック" id="btn"/>
<script>
"use strict";
window.onload = e => {
	const x = 15, y = 15;
	const elem = document.elementFromPoint(x, y);
	elem.dispatchEvent(new MouseEvent("click", {
		clientX: x,
		clientY: y
	}));
};
btn.onclick = e => {
	console.log("clicked");
};
</script>

コンソールで実行する場合は, 下記のコードを(編集した後)コンソールにコピーペーストして実行してみて下さい.

{
	const x = 15, y = 15;
	const elem = document.elementFromPoint(x, y);
	elem.dispatchEvent(new MouseEvent("click", {
		clientX: x,
		clientY: y
	}));
}

参考)
https://developer.mozilla.org/ja/docs/Web/API/Document/elementFromPoint
https://developer.mozilla.org/ja/docs/Web/Guide/Events/Creating_and_triggering_events

Comments

[moscow3]

すみません。質問の仕方が悪かったです
あるWEBページのデベロッパーツールのコンソールから　というようなことはできないのでしょうか？
---
編集ありがとうございました。

[退会済みユーザー]

それに対しての回答がされてると思いますよ。

[defghi1977]

一応Mozillaのページに対してFireFoxのコンソールからクリックできたので「可能」と判断しましたが, ブラウザ依存でないことを願います

[moscow3]

for cloudkingさん。
私のコメントの後で、defighi1977さんが編集をされました。　
（決して回答を見てなかったとかいうわけではないので、念のため）

[moscow3]

for defghi1977さん。
実行した結果、普通にtrueとだけ返されたのですが（リンクをクリックした・・・はずなのに）
クリックイベントを起こしても実際にクリックしたことにはならない・・ということでしょうか？

[defghi1977]

クリック対象のリンク(a要素)が判っているのであれば, ②/③の方法を使ったほうが良いでしょう. ①のelementFromPointメソッドは操作対象が不定な場合に利用します.

[moscow3]

なるほど。　確かに普通は②③の方法でうまくいくのですが、たまにそれではできない時があります。
（たとえばflash を使ったゲームを自動プレーするとか・・）　そういうものに関しては、今回の、
座標を指定
↓
そこにあるエレメントを取得
↓
取得したエレメントをクリック

という方法でもうまくいかないのでしょうか？

[defghi1977]

私の回答はあくまでHTML5に関わる基本的なものであり, 全てのパターンを網羅するものではありません. Flashについては質問の質が異なるため, 改めて記事を立てて下さい.

Answer 2

要素がクリックされた際のイベントで指定されている関数を直接呼び出して処理するといったことは可能かと思いますが、ブラウザ内の処理だけで任意のマウスクリック操作等を行うことはできないかと思います。
ショッピングサイトを表示しただけで勝手に買い物をされたりしても困るかと思いますので、そのようなことは一般にできないものと思われます。

ユーザーの意図しないクリック操作を行わせる行為としては、クリックジャッキングといった手法などが存在しますが、これらへの対策もいくらかは考えられます。