aタグをコンソールから押す方法についてやっと理解できたのでメモ。
1.やりたいこと
こんなHTML内のaタグをJavaScriptからクリックしたい。
<body>
<a href="https://www.google.com" id="target">Google.com</a>
</body>
2.ダメな例
function log(id){
const target = document.getElementById(id);
console.log(e);
target.dispatchEvent(new Event('click'));
}
element.dispatchEvent()を使ってみる。dispatchEventは引数にEventオブジェクトを取って、要素に任意のイベントを割り当てることができる。
上記の場合は、Eventオブジェクトのコンストラクタに'click'を指定して、aタグにクリックイベントを発生させようとしている。
が、画面遷移は発生しない。
3.これならできるけど
function log(id){
const target = document.getElementById(id);
console.log(e);
target.click();
}
click()メソッドを実行して、クリック動作をシミュレーションすることができ、aタグによる遷移を発生させることができる。
4.DispatchEventにこだわるなら
aタグのhref属性を削除したうえで、イベントオブジェクトを確認してみる。
function log(id){
const target = document.getElementById(id);
target.addEventListener('click', function (e) {
console.log(e);
});
target.click();
}
Eventオブジェクトではなく、PointerEventオブジェクトが割り当てられている模様。
PointerEvent インターフェイスは、接触点の形状、イベントを生成した機器の種類、接触面に加えられた圧力の量など、ポインターによって生成された DOM イベントの状態を表します。
-----mdc web docs
クラス図
PointerEventはEventオブジェクトをプロトタイプとして継承しているので(多分)、Eventオブジェクトで指定できる'click'イベントも指定可能。
PointerEventによる発火であればログ出力して画面遷移。
function log(id){
const target = document.getElementById(id);
target.addEventListener('click', function (e) {
if(e.constructor.name === 'PointerEvent'){
console.log('PointerEvent!!');
}
});
target.dispatchEvent(new PointerEvent('click'));
}
🥰🥰🥰