Jqueryで右クリックでオリジナルメニューの作成

##実装したいこと
サイトを参考に
例えば卵焼き上で右クリックしたらオリジナルのメニューが出て、wikipediaとcookpadを選べ、どちらかを選ぶと卵焼きの各そのリンクに飛ぶ
麻婆豆腐上で右クリックしたらオリジナルのメニューが出て、wikipediaとcookpadを選べ、どちらかを選ぶと麻婆豆腐の各そのリンクに飛ぶ
というシステムを作りたかったので、悩んでいる部分が解決できれば麻婆豆腐・唐揚げとコピペで半ば強制的に実装することは可能だと思うのですが、どのようにすればいいでしょうか。
##悩んでいる部分
document.getElementById("main").addEventListenerで卵焼き、麻婆豆腐、唐揚げ上で右クリックするとメニューが出現したため、
じゃmainの子要素であるcook1クラスを指定すればいいんだと思い**document.getElementById("main").getElementsByClassName('cook1').**を記述したところメニューが出現しなくなりました。どうしてなのでしょうか、mainの子要素であるcook1クラスを指定するという考えが間違えているのでしょうか。
##コード

html
1<!DOCTYPE html>
2<meta http-equiv="content-type" charset="utf-8">
3<html>
4  <head>
5    <title>JavaScriptでオリジナルの右クリックメニューを作成する方法</title>
6    <style>
7      #contextmenu{
8        display:none;
9        position:fixed;
10        left:0px;
11        top:0px;
12        width:200px;
13        height:100px;
14        border:1px solid #000;
15        background-color:#fff;
16      }
17      #contextmenu li{
18        cursor:pointer;
19      }
20  </style>
21</head>
22<body onContextmenu="return false;">
23  <div id="main">
24      <p class="cook1">卵焼き</p>
25      <p class="cook2">麻婆豆腐</p>
26      <p class="cook3">唐揚げ</p>
27  </div>
28  <div id="contextmenu">
29    <ul>
30      <li onClick="menu1()">1.Wikipedia</li>
31      <li onClick="menu2()">2.cookpad</li>
32    </ul>
33  </div>
34  <script>
35      window.onload = function(){
36        document.getElementById("main").getElementsByClassName('cook1').addEventListener('contextmenu',function (e){
37          document.getElementById('contextmenu').style.left=e.pageX+"px";
38          document.getElementById('contextmenu').style.top=e.pageY+"px";
39          document.getElementById('contextmenu').style.display="block";
40        });
41        document.body.addEventListener('click',function (e){
42          document.getElementById('contextmenu').style.display="none";
43        });
44      }
45      function menu1(){
46        open( "url", "_blank" ) ;
47      }
48      function menu2(){
49        open( "url", "_blank" ) ;
50      }
51
52    </script>
53  </body>
54</html>

yambejp

2021/12/23 05:04 編集

右クリックは邪道ですがマストですか？ hoverでもダブルクリックでもやりようはあると思いますが

m.ts10806

2021/12/23 04:06

今どこまでできていて、どこまで理解されてるのでしょうか。本当に何も手が出ないのでしたら、やりたいことよりも先に理解に努めるべきと思います（質問ではなく作業依頼になっているから）

martini777

2021/12/23 04:08

右クリックでの実装が仕様でマストであるため、質問させていただきました。また、右クリックでの実装は何故邪道なのでしょうか。その理由についても教えていただけると大変嬉しいです。

m.ts10806

2021/12/23 04:52

ブラウザデフォルトの機能をラップして別のことをやるからですね。

yambejp

2021/12/23 05:16 編集

> 右クリックでの実装は何故邪道なのでしょうか m.ts10806さんの仰るようにシステム側で利用する前提のブラウザの機能を殺すのは厳しいですねつまりはユーザーにとって直感的なインタフェースではないと言うことですその他そもそも右ボタンなどない機材はたくさんありUIの統一ができないのは面倒です。コンテキストメニューはスマホのブラウザだと長押しですねつまりはイベントのとり方も右クリックなんて考え方はなく、コンテキストメニュー表示する方法がデバイスによっては右ボタンに割り当てられているということです

martini777

2021/12/23 05:47

そうなんですね。ありがとうございます。

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

回答1件

ベストアンサー

処理はコンテキストメニューになります

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  hoge.addEventListener('contextmenu',e=>{
4    e.preventDefault();
5    const id=e.target.id;
6    const menu=document.querySelector(`[data-contextmenu="${id}"]`);
7    Object.assign(menu.style,{display:"block",top:e.pageY,left:e.pageX});
8  });
9});
10</script>
11<style>
12#hoge{
13width:100px;
14height:100px;
15background-Color:gray;
16}
17[data-contextmenu]{
18position:absolute;
19display:none;
20  background-Color:yellow;
21}
22</style>
23<div id="hoge">hoge</div>
24<div data-contextmenu="hoge">
25<ui>
26<li>1</li>
27<li>2</li>
28<li>3</li>
29</ul>
30</div>