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

Thực thi script khi menu ngữ cảnh được kích hoạt (contextmenu) trong HTML5?

Thuộc tính contextmenu (HTML5.1) gán menu tùy chỉnh (id của <menu type="context">) cho phần tử khi chuột phải. Đã bị loại bỏ khỏi HTML Living Standard và không trình duyệt nào hỗ trợ (Chrome 61+, Firefox 63+, Safari, Edge đều bỏ).

Ví dụ (không hoạt động)

<!Doctype html>
<html>
  <head>
    <title>Thẻ menuitem 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">
        <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>
  </body>
</html>

Thay thế: Custom Context Menu bằng JS

Xem chi tiết tại bài ID 1003064051 (onshow) — cùng giải pháp.

Tóm tắt giải pháp hiện đại

element.addEventListener('contextmenu', e => {
  e.preventDefault();
  // Hiển thị menu tùy chỉnh tại e.clientX, e.clientY
});

Lưu ý

  • Không dùng <menu>, <menuitem>, contextmenu attribute.
  • Dựng UI menu bằng <div>, <ul>, <button> + CSS/JS.
  • Xử lý ESC để đóng, click outside để đóng, focus management.