ユーザー操作のイベントかそうでないかを判定できるevent. isTrustedプロパティで意図しない動作を防ぐ

イベントの伝播を防ぐのはstopPropagation()ですが、伝播するはずのない要素でイベントが走ってしまい動作不良が起きてしまうことがありました。
そのときに問題の解消方法として採用したisTrustedプロパティを紹介します。

ユーザー操作かスクリプトで作成・変更されたかを返してくれるevent.isTrusted

MDNには次のような説明があります。

isTrusted は Event インターフェイスの読み取り専用プロパティで、このイベントがユーザー操作によって生成された場合は true、このイベントがスクリプトで作成または変更されたり、 EventTarget.dispatchEvent() で配信されたりした場合は false となる論理値を返します。
https://developer.mozilla.org/ja/docs/Web/API/Event/isTrusted

stopPropagation()はイベントの伝播自体を止めますが、event.isTrustedはイベントとして受け取った結果からユーザー操作によるイベントなのかどうかを判定できます。

ユーザー操作以外のイベントとは次のようなものです。
ここではある要素（foo）をクリックしたら別の要素（bar）もクリックしたとみなしています。

const foo = document.getElementById("foo");
const bar = document.getElementById("bar");

foo.addEventLister("click", (event) => {
  // メインの処理

  // 他の要素もクリックしたことにする
  bar.click();
});

上記が適切かどうかはさておき、複数のUIや処理を連携すると、このような処理が必要になってしまう場合もあるかもしれません。

実際にクリックした場合にだけ実行したいときは次のようにevent.isTrustedで条件分岐を作ります。

function func(event) {
  // ユーザーが実際にクリックした要素にだけ処理を実行する
  if (event.isTrusted) {
    // 処理内容
  }  
}

これで意図しない動作を減らすことができました。

データの削除などを含むような重要な処理内容を、必ずユーザーが操作した結果として実行したい場合などで使うのもいいかもしれません。

event.isTrustedは改変が可能

知っていると便利な場面もあるevent.isTrustedですが、必ずtrueを返すように変更することもできるようです。

[javascript] isTrusted=trueな疑似クリックを作る #JavaScript - Qiita

改変する用途として、プログラムをユーザー操作として受け取って欲しい場面で使うことが多いようです。
たとえば自動テストツールなどでプログラムがした操作をユーザーが操作したものとして偽装したい、みたいなことです。
その他にもライブラリ側が意図せず変更してしまっていることもあるようです。

改変されている場合にユーザー操作かどうかを判断するのは難しい（あるいはハッキー）なので、できるだけ仕様通りの使い方をしていきたいですね。

まとめ

• event.isTrustedでユーザー操作のイベントかどうかを判定できる
• 改変する方法があるので使用する際には注意する

イベントに関するその他のプロパティはこちらの記事がわかりやすかったです。
【初学者用まとめ(イベント処理編)】まず覚えるべきJavaScriptのコードの書き方（自習記録） - Code Journey

Eventオブジェクトは頻繁に使うものなので、ちょっとしたプロパティを知っておくだけで助かる場面は多いかもしれません。