라이브러리 없이 웹페이지에서 사용자 정의 오른쪽 클릭 메뉴를 만드는 방법은 무엇입니까?

<code class="javascript">if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    // Here you will draw your own menu
    // However, don't forget to use e.preventDefault() to disable the default context menu
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    alert("You've tried to open context menu");
    window.event.returnValue = false;
  });
}</code>

<code class="javascript">// Create the menu element
var menu = document.createElement('div');
menu.id = 'custom-menu';

// Style the menu
menu.style.position = 'absolute';
menu.style.backgroundColor = '#ffffff';
menu.style.border = '1px solid #000000';
menu.style.zIndex = '10';

// Add menu items
var item1 = document.createElement('div');
item1.innerHTML = 'Option 1';
item1.onclick = function() {
  alert('Clicked Option 1');
};

var item2 = document.createElement('div');
item2.innerHTML = 'Option 2';
item2.onclick = function() {
  alert('Clicked Option 2');
};

// Append items to the menu
menu.appendChild(item1);
menu.appendChild(item2);

// Append the menu to the document
document.body.appendChild(menu);</code>