javascript oncontextmenu事件使用教程-编程学习网

这篇文章将为大家详细讲解有关javascript oncontextmenu事件使用教程，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

JavaScript oncontextmenu 事件使用教程

事件简介

oncontextmenu 事件在用户右键单击元素时触发。它允许开发人员响应右键单击事件并自定义元素的上下文菜单。

语法

element.oncontextmenu = function(event) {
  // 代码块
};

其中：

element 是要附加事件监听器的 HTML 元素。
event 是由右键单击事件触发的事件对象。

事件对象属性

event 对象包含以下属性：

clientX 和 clientY：鼠标指针的 X 和 Y 坐标。
button：指示按下的鼠标按钮（0 = 左键，1 = 中键，2 = 右键）。
ctrlKey、shiftKey 和 altKey：指示是否按下相应修饰键。
target：触发事件的元素。
preventDefault() 方法：阻止浏览器显示默认上下文菜单。

示例

以下示例显示如何禁用元素的默认上下文菜单：

document.getElementById("myElement").oncontextmenu = function(event) {
  event.preventDefault();
};

自定义上下文菜单

preventDefault() 方法允许开发人员自定义元素的上下文菜单。可以通过以下步骤完成：

在事件处理程序中调用 preventDefault() 方法。
创建一个包含菜单项的 DOM 元素。
将菜单元素附加到文档主体。
使用 CSS 定位和样式化菜单。
监听菜单项的单击事件以执行所需操作。

示例

以下示例显示如何使用 oncontextmenu 事件自定义元素的上下文菜单：

document.getElementById("myElement").oncontextmenu = function(event) {
  event.preventDefault();

  var menu = document.createElement("ul");
  menu.classList.add("context-menu");

  var menuItem1 = document.createElement("li");
  menuItem1.innerHTML = "选项 1";
  menuItem1.onclick = function() {
    // 执行操作 1
  };

  var menuItem2 = document.createElement("li");
  menuItem2.innerHTML = "选项 2";
  menuItem2.onclick = function() {
    // 执行操作 2
  };

  menu.appendChild(menuItem1);
  menu.appendChild(menuItem2);

  document.body.appendChild(menu);

  // 定位菜单
  menu.style.left = event.clientX + "px";
  menu.style.top = event.clientY + "px";
};

优点

使用 oncontextmenu 事件具有以下优点：