右键自定义菜单

.markdown

右键自定义菜单

A Pen by 君临 on CodePen.

License.

index.html

  <div id="menu">
    <ul>
      <li>复制</li>
      <li>粘贴</li>
      <li>运行</li>
      <li>工具</li>
      <li>帮助</li>
    </ul>
  </div>

script.js

var menu = document.getElementById('menu')

document.oncontextmenu = e => {
  menu.style.display = 'block'
  //让自定义菜单随鼠标的箭头位置移动
  menu.style.left = e.clientX + 'px'
  menu.style.top = e.clientY + 'px'
  //return false阻止系统自带的菜单，
  //return false必须写在最后，否则自定义的右键菜单也不会出现
  return false
}
//实现点击document，自定义菜单消失
document.onclick = function() {
  menu.style.display = 'none'
}

style.css

    #menu {
      height: 200px;
      width: 80px;
      border: 1px solid light-gray;
      background-color: antiquewhite;
      display: none;
      position: absolute;
    }

    ul,
    li {
      margin: 0;
      padding: 0;
      list-style-type: none;
      line-height: 40px;
      cursor: pointer
    }
li {
  padding: 0 10px;
  text-align: center;
}
li:hover {
  background-color: white;
}