JS自定义右键菜单实现代码解析

让我来为大家详细讲解如何用JS自定义右键菜单实现。

标准的右键菜单

在浏览器中，我们可以通过鼠标右键点击页面来弹出标准的右键菜单。这个菜单中包含了常用的一些操作，比如“复制”、“剪切”、“粘贴”和“全选”等。

如果我们想要添加自定义的菜单项，就需要用到JS的事件处理机制。

实现自定义右键菜单

实现自定义右键菜单的关键在于两点——阻止默认的右键菜单弹出，和展现我们自己定义的菜单。

阻止默认的右键菜单

我们可以给文档（document）对象绑定右键点击事件，在事件中调用事件对象的preventDefault()方法来阻止默认的右键菜单弹出。

document.addEventListener('contextmenu', function(e) {
  e.preventDefault()
})

这样我们就可阻止默认的右键菜单的弹出了。

展现自定义的菜单

自定义菜单的展现需要我们自己去编写HTML和CSS代码。在事件处理函数中，我们可以创建一个DOM元素作为菜单容器，并设置它的位置和样式。

document.addEventListener('contextmenu', function(e) {
  e.preventDefault()

  var menu = document.createElement('div')
  menu.style.position = 'absolute'
  menu.style.top = e.clientY + 'px'
  menu.style.left = e.clientX + 'px'
  menu.style.width = '120px'
  menu.style.padding = '8px'
  menu.style.border = '1px solid #ccc'
  menu.style.backgroundColor = '#fff'
  menu.innerHTML = '<ul><li>菜单项1</li><li>菜单项2</li></ul>'

  document.body.appendChild(menu)
})

其中，我们创建了一个DIV元素作为菜单容器，将其样式设置为绝对定位，top和left属性设置为事件对象的clientY和clientX值，宽度、内边距、边框和背景颜色等样式通过CSS进行设置。

对于菜单中的项，我们可以使用HTML列表（ul、li）元素，其内容可以自行定义。

实现点击事件

我们需要对自定义菜单的菜单项进行绑定点击事件，以便执行相关操作。

document.addEventListener('contextmenu', function(e) {
  e.preventDefault()

  var menu = document.createElement('div')
  menu.style.position = 'absolute'
  menu.style.top = e.clientY + 'px'
  menu.style.left = e.clientX + 'px'
  menu.style.width = '120px'
  menu.style.padding = '8px'
  menu.style.border = '1px solid #ccc'
  menu.style.backgroundColor = '#fff'
  menu.innerHTML = '<ul><li>菜单项1</li><li>菜单项2</li></ul>'

  menu.addEventListener('click', function(ev) {
    if (ev.target.innerText === '菜单项1') {
      console.log('执行菜单项1的操作')
    } else if (ev.target.innerText === '菜单项2') {
      console.log('执行菜单项2的操作')
    }
    menu.remove()
  })

  document.body.appendChild(menu)
})

上述代码片段中给菜单容器menu绑定点击事件，我们根据所点击的菜单项的文本进行相应的操作，之后移除菜单容器即可。

示例演示

下面，我们通过两个示例来演示如何用上述代码实现自定义右键菜单：

示例1：右键复制颜色值

假设我们有一个页面中的颜色块，我们希望右键点击颜色块时能够复制颜色值到剪贴板中。以下是实现代码：

<div id="color-box" style="background-color: #f44336; width: 100px; height: 100px;"></div>

<script>
document.addEventListener('contextmenu', function(e) {
  e.preventDefault()

  var color = document.querySelector('#color-box').style.backgroundColor
  var menu = document.createElement('div')
  menu.style.position = 'absolute'
  menu.style.top = e.clientY + 'px'
  menu.style.left = e.clientX + 'px'
  menu.style.width = '120px'
  menu.style.padding = '8px'
  menu.style.border = '1px solid #ccc'
  menu.style.backgroundColor = '#fff'
  menu.innerHTML = '<ul><li>复制颜色</li></ul>'

  menu.addEventListener('click', function(ev) {
    if (ev.target.innerText === '复制颜色') {
      copyToClipboard(color)
    }
    menu.remove()
  })

  document.body.appendChild(menu)
})

function copyToClipboard(text) {
  var input = document.createElement('input')
  input.type = 'text'
  input.value = text
  document.body.appendChild(input)
  input.select()
  document.execCommand('Copy')
 input.remove()
}
</script>

上述代码中，我们通过querySelector获取颜色块的颜色值，创建了一个“复制颜色”的菜单项，并在其点击事件中调用copyToClipboard方法，将颜色值复制到剪贴板中。

示例2：右键添加书签

假设我们有一个网站，我们希望右键点击网站的任何一个页面时能够将该页面添加到浏览器的书签栏中。以下是实现代码：

<script>
document.addEventListener('contextmenu', function(e) {
  e.preventDefault()

  var pageTitle = document.title
  var pageUrl = window.location.href
  var menu = document.createElement('div')
  menu.style.position = 'absolute'
  menu.style.top = e.clientY + 'px'
  menu.style.left = e.clientX + 'px'
  menu.style.width = '120px'
  menu.style.padding = '8px'
  menu.style.border = '1px solid #ccc'
  menu.style.backgroundColor = '#fff'
  menu.innerHTML = '<ul><li>添加书签</li></ul>'

  menu.addEventListener('click', function(ev) {
    if (ev.target.innerText === '添加书签') {
      window.external.AddFavorite(pageUrl, pageTitle)
    }
    menu.remove()
  })

  document.body.appendChild(menu)
})
</script>

上述代码中，我们通过document.title获取页面的标题，通过window.location.href获取页面的URL，并调用window.external.AddFavorite方法将页面添加到书签栏中。

这便是用JS自定义右键菜单的实现方法，希望能对大家有所帮助。