【JavaScript】右クリックメニューを右クリックせずに出す方法

右クリックメニューを画面上の操作に頼ることなくスクリプト上の操作のみで出す方法を模索しているのですが
下のようにスクリプトから右クリックイベントを生成＆送出しても、コンソール上ではちゃんと右クリックイベントが発行されているのに何故か右クリックメニューが表示されません

HTML
1<div id="hoge">hoge</div>

JavaScript
1const hoge = document.getElementById('hoge');
2hoge.addEventListener('contextmenu', () => {
3  console.log('yes');
4})
5
6setTimeout(() => {
7  //右クリックイベントを生成
8  let event = new MouseEvent('contextmenu');
9  //生成したイベントをhogeに送出
10  hoge.dispatchEvent(event);
11}, 2000);

この問題の原因、または別のやり方でスクリプトから右クリックメニューを出す方法をご存知の方がいましたら教えて頂きたいです

行動規範の内容に同意します

回答2件

“本当の” ユーザイベントであることを伝える方法があります。

本当のユーザアクションから来たイベントの場合、プロパティ event.isTrusted は true になります。スクリプトで生成されたイベントは false です。
カスタムイベントのディスパッチ

セキュリティの問題で、スクリプトで作成したイベントを「デフォルトイベントだと騙す方法」はないと考えていいと思います。

投稿2021/11/19 10:05

Lhankor_Mhy

総合スコア36163

flandre

2021/11/19 11:00 編集

回答ありがとうございます！なるほど…。納得の理由ですただ一つ疑問なのが、isTrustedがfalseの場合であってもイベント自体はきちんと発火しているみたいで試しに他の命令をしてみてもちゃんと実行されているようなのですが、この違いは何なんでしょうか？何故下記のような命令は通されるのに、メニュー表示は弾かれるのでしょうか hoge.addEventListener('contextmenu', () => { console.log('yes'); //命令を追加 const div = document.createElement('div'); hoge.appendChild(div); div.textContent = 'new div'; })

Lhankor_Mhy

2021/11/20 02:13 編集

よく考えると、コンテクストメニューはブラウザではなくてOSレベルの話なので、もしかすると isTrusted は関係なかったかもですね。「それは別物」という yambejp さんのご回答の方が妥当そうです。

flandre

2021/11/20 07:53

なるほど、コンテクストメニューはwindowsに設定されている機能なんですね別物とおっしゃられていた意味が理解できました回答ありがとうございます！

行動規範の内容に同意します

ベストアンサー

dispatchEventすればイベントを付加することはできますがそれは
contextmenuを実際におこなったのとは別の挙動です

javascript
1<script>
2HTMLElement.prototype.trigger=function(eventStr){
3  const e = new CustomEvent("HTMLEvents");
4  e.initEvent(eventStr, true, true );
5  return this.dispatchEvent(e);
6};
7document.addEventListener('mouseover',e=>{
8  if(e.target.closest('#hoge')){
9    console.log(e.type);
10    e.target.trigger('contextmenu');
11  }
12});
13document.addEventListener('contextmenu',e=>{
14  console.log(e.type);
15});
16
17</script>
18<div id="hoge">hoge</div>