Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Thực thi script khi menu ngữ cảnh hiển thị (onshow) trong HTML?

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>