Sự kiện onshow trên <menu type="context"> kích hoạt khi menu ngữ cảnh (context menu) được hiển thị (chuột phải). Lưu ý: <menu> type="context" và <menuitem> đã bị loại bỏ khỏi chuẩn HTML Living Standard và không được hỗ trợ bởi trình duyệt hiện đại.
Ví dụ (không hoạt động trên trình duyệt hiện nay)
<!Doctype html>
<html>
<head>
<title>Menu ngữ cảnh HTML</title>
</head>
<body>
<div style="border:1px solid #000; padding:20px;" contextmenu="clickmenu">
<p>Chuột phải vào đây....</p>
<menu type="context" id="clickmenu" onshow="display()">
<menuitem label="Tutorialspoint" onclick=""></menuitem>
<menuitem label="Thư viện hướng dẫn" onclick=""></menuitem>
<menuitem label="Coding Ground" onclick=""></menuitem>
<menuitem label="Hỏi/Đáp" onclick=""></menuitem>
</menu>
</div>
<script>
function display() {
alert("Menu ngữ cảnh sẽ hiển thị.");
}
</script>
</body>
</html>
Thay thế hiện đại: Custom Context Menu
<div id="area" style="border:1px solid #ccc; padding:20px; width:300px; height:150px;">Chuột phải vào đây</div>
<div id="ctxMenu" style="display:none; position:fixed; border:1px solid #ccc; background:white; box-shadow:0 2px 8px rgba(0,0,0,.15); min-width:180px; z-index:9999;">
<div class="menu-item" data-action="opt1">Tùy chọn 1</div>
<div class="menu-item" data-action="opt2">Tùy chọn 2</div>
<div class="menu-item" data-action="opt3">Tùy chọn 3</div>
</div>
<script>
const area = document.getElementById('area');
const menu = document.getElementById('ctxMenu');
area.addEventListener('contextmenu', e => {
e.preventDefault();
menu.style.left = e.clientX + 'px';
menu.style.top = e.clientY + 'px';
menu.style.display = 'block';
});
document.addEventListener('click', () => menu.style.display = 'none');
menu.addEventListener('click', e => {
if (e.target.classList.contains('menu-item')) {
alert('Chọn: ' + e.target.dataset.action);
}
});
</script>