js自定义鼠标右键的实现原理及源码

接下来我将详细讲解如何实现 js 自定义鼠标右键的效果。

一、实现原理

1. 监听鼠标右键事件

要实现自定义鼠标右键，我们首先需要监听鼠标事件，判断是否在右键上单击。在 JavaScript 中，可以使用 contextmenu 事件来监听右键事件。

// 监听右键事件
document.addEventListener('contextmenu', function (event) {
   // 阻止系统默认的右键菜单弹出
   event.preventDefault();
});

2. 创建自定义菜单

在 contextmenu 事件的回调函数中，我们可以创建并展示自定义菜单。通常使用 HTML 和 CSS 来创建菜单，然后使用 JavaScript 控制菜单的显隐和位置。

document.addEventListener('contextmenu', function (event) {
   // 阻止系统默认的右键菜单弹出
   event.preventDefault();

   // 创建菜单元素
   var menu = document.createElement('div');
   menu.innerHTML = '这里是自定义菜单';
   menu.style.position = 'fixed';
   menu.style.left = event.clientX + 'px';
   menu.style.top = event.clientY + 'px';

   // 将菜单添加到文档中
   document.body.appendChild(menu);
});

3. 隐藏自定义菜单

当用户单击菜单项或者其他区域时，我们需要隐藏自定义菜单。可以监听 click 或 mousedown 事件，来隐藏菜单。

document.addEventListener('contextmenu', function (event) {
   // 阻止系统默认的右键菜单弹出
   event.preventDefault();

   // 创建菜单元素
   var menu = document.createElement('div');
   menu.innerHTML = '这里是自定义菜单';
   menu.style.position = 'fixed';
   menu.style.left = event.clientX + 'px';
   menu.style.top = event.clientY + 'px';

   // 将菜单添加到文档中
   document.body.appendChild(menu);

   // 监听点击事件，隐藏菜单
   document.addEventListener('click', function () {
      menu.style.display = 'none';
   });
});

二、示例说明

示例1：自定义菜单

// 监听右键事件
document.addEventListener('contextmenu', function (event) {
   // 阻止系统默认的右键菜单弹出
   event.preventDefault();

   // 创建菜单元素
   var menu = document.createElement('div');
   menu.innerHTML = '<ul><li>菜单项1</li><li>菜单项2</li><li>菜单项3</li></ul>';
   menu.style.position = 'fixed';
   menu.style.left = event.clientX + 'px';
   menu.style.top = event.clientY + 'px';
   menu.style.backgroundColor = '#fff';
   menu.style.border = '1px solid #ccc';

   // 将菜单添加到文档中
   document.body.appendChild(menu);

   // 监听鼠标点击事件，隐藏菜单
   document.addEventListener('click', function () {
      menu.style.display = 'none';
   });
});

示例2：在段落中插入自定义链接

// 监听右键事件
document.addEventListener('contextmenu', function (event) {
   // 阻止系统默认的右键菜单弹出
   event.preventDefault();

   // 创建菜单元素
   var menu = document.createElement('div');
   menu.innerHTML = '<ul><li>在新窗口中打开链接</li><li>在当前窗口中打开链接</li></ul>';
   menu.style.position = 'fixed';
   menu.style.left = event.clientX + 'px';
   menu.style.top = event.clientY + 'px';
   menu.style.backgroundColor = '#fff';
   menu.style.border = '1px solid #ccc';

   // 将菜单添加到文档中
   document.body.appendChild(menu);

   // 在菜单项上单击，插入链接
   menu.addEventListener('click', function (e) {
      if (e.target.tagName === 'LI') {
         var link = document.createElement('a');
         link.href = 'http://www.example.com/';
         link.target = (e.target.innerText === '在新窗口中打开链接') ? '_blank' : '_self';
         link.innerText = '示例链接';
         document.getSelection().getRangeAt(0).insertNode(link);
      }

      // 隐藏菜单
      menu.style.display = 'none';
   });
});

以上就是实现 js 自定义鼠标右键的完整攻略，希望能对您有所帮助。