Code click chuột phải hiển thị menu thay cho menu mặc định của trình duyệt

<h2>Thử click chuột phải vào đây để xem menu nhé</h2><br>
Hãy bôi đen nội dung này sau đó click chuột phải xem có nút sao chép văn bản không nhé<br><br>
<a href="https://google.com">Link thử nghiệm chuột phải vào đây xem có new tab và copy link không</a>

<div id="contextMenu" class="context-menu">
    <ul>
      <li ><a title="Mua ngay" href="/login">Mua ngay</a></li>
      <li ><a title="Tài liệu" href="/tai-lieu">Tài liệu</a></li>
      <li ><a title="Tài nguyên" href="/tai-nguyen">Tài nguyên</a></li>
    </ul>
    
    
    <ul>
	  <li id="copycontent">
		<button title="Sao chép" onclick="copySelectedText()"><i class="fa-sharp fa-regular fa-copy"></i> Sao chép</button>
	  </li>
	  <li id="opencopyItem" style="display: none;">
          <button onclick="copyLink()"><i class="fa-regular fa-copy"></i> Sao chép link</button>
      </li>
      <li id="openNewTabItem" style="display: none;">
          <button onclick="openNewTab()"><i class="fa-regular fa-plus"></i> Mở tab mới</button>
      </li>
	</ul>
    
    
    
	<ul class="menu-lh">
      <li ><a title="Messenger" href="https://m.me/adfoxtheme" target="_blank">Messenger</a></li>
      <li ><a title="Telegram" href="https://telegram.me/ihoan" target="_blank">Telegram</a></li>
      <li ><a title="Zalo" href="https://zalo.me/0369355369" target="_blank">Zalo</a></li>
    </ul>
</div>
<style>
.context-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    padding: 15px;
    z-index: 999;
    border-radius: 10px;
    width: 170px;
    box-shadow: 0px 0px 7px #00000038;
  	animation: popup 0.5s;
}
.context-menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.context-menu button {
    border: none;
    width: 100%;
    background: none;
    text-align: left;
    padding: 0px;
    display: grid;
}
.context-menu a{
	text-decoration: none;
}
#contextMenu ul li {
    padding:5px 10px;
}
#contextMenu ul li:hover{
	background:#ccc;
	padding:5px 10px;
	border-radius:7px;
}
#contextMenu ul li i{
	margin-right:7px;
	color:#0c0;
}
ul.menu-lh {
    border-top: 2px solid #ccc;
    padding-top: 10px;
    margin-top: 10px;
}
</style>
<script>
// chuc nang chinh
document.addEventListener('contextmenu', (event) => {
  event.preventDefault();
  const contextMenu = document.getElementById('contextMenu');
  const mouseX = event.clientX + window.pageXOffset;
  const mouseY = event.clientY + window.pageYOffset;
  const pageWidth = document.body.scrollWidth;
  const pageHeight = document.body.scrollHeight;
  const menuWidth = contextMenu.offsetWidth;
  const menuHeight = contextMenu.offsetHeight;
  let adjustedX = mouseX;
  let adjustedY = mouseY;
  if (mouseX + menuWidth > pageWidth) {
    adjustedX = pageWidth - menuWidth;
  }
  if (mouseY + menuHeight > pageHeight) {
    adjustedY = pageHeight - menuHeight;
  }
  contextMenu.style.display = 'block';
  contextMenu.style.top = `${adjustedY}px`;
  contextMenu.style.left = `${adjustedX}px`;
});
document.addEventListener('click', () => {
  const contextMenu = document.getElementById('contextMenu');
  contextMenu.style.display = 'none';
});

// open new tab va copy link
let selectedLink = null;
function showOpenNewTabButton(x, y) {
    const openNewTabItem = document.getElementById('openNewTabItem');
	const opencopyItem = document.getElementById('opencopyItem');
    if (selectedLink) {
        openNewTabItem.style.display = 'block';
		opencopyItem.style.display = 'block';
        openNewTabItem.innerHTML = `<button onclick="openNewTab()"><i class="fa-regular fa-plus"></i> Mở tab mới</button>`;
		opencopyItem.innerHTML = `<button onclick="copyLink()"><i class="fa-regular fa-copy"></i> Sao chép link</button>`;
        openNewTabItem.style.top = `${y}px`;
        openNewTabItem.style.left = `${x}px`;
    } else {
        openNewTabItem.style.display = 'none';
		opencopyItem.style.display = 'none';
    }
}
function openNewTab() {
    window.open(selectedLink, '_blank');
}
function copyLink() {
    const linkTextArea = document.createElement('textarea');
    linkTextArea.value = selectedLink;
    document.body.appendChild(linkTextArea);
    linkTextArea.select();
    document.execCommand('copy');
    document.body.removeChild(linkTextArea);
    console.log('Đã sao chép:', selectedLink);
}
document.addEventListener('contextmenu', (event) => {
    const target = event.target;
    if (target.tagName === 'A' || target.closest('a')) {
        selectedLink = target.tagName === 'A' ? target.href : target.closest('a').href;
    } else if (target.tagName === 'BUTTON' || target.closest('button')) {
        const buttonElement = target.tagName === 'BUTTON' ? target : target.closest('button');
        const onclickAttribute = buttonElement.getAttribute('onclick');
        if (onclickAttribute) {
            const urlMatch = onclickAttribute.match(/location.href=['"](.*?)['"]/);
            if (urlMatch && urlMatch[1]) {
                selectedLink = urlMatch[1];
            }
        }
    } else {
        selectedLink = null;
    }
    showOpenNewTabButton(event.clientX, event.clientY);
});
document.addEventListener('click', () => {
    selectedLink = null;
    showOpenNewTabButton(0, 0);
});

// sao chep text
function copySelectedText() {
	const content = document.getElementById('content');
	const selectedText = window.getSelection().toString();
	if (selectedText) {
		const dummyTextArea = document.createElement('textarea');
		dummyTextArea.value = selectedText;
		document.body.appendChild(dummyTextArea);
		dummyTextArea.select();
		document.execCommand('copy');
		document.body.removeChild(dummyTextArea);
		console.log('Đã sao chép:', selectedText);
	} 
}
const copycontent = document.getElementById('copycontent');
document.addEventListener('selectionchange', () => {
    const selectedText = window.getSelection().toString();
    if (selectedText) {
        copycontent.style.display = 'block';
    } else {
        copycontent.style.display = 'none';
    }
});
</script>