Javascript零碎之自定义鼠标右键列表

[kekobin]

我们都知道，点击鼠标右边默认会有一个选项列表，给我们提供了很多的快捷操作。如果我们要自定义这个选项列表是否可行呢？
答案是肯定的，浏览器给我们提供了"contextmenu"这个事件让我们自定义右键列表。而且，很可喜的是，Chrome、Edge、Firfox全都支持，并且它的用法呢也很简单：
首先，定义一个只能使用自定义右键列表的区块和自定义右键列表：

<div class="custom-menu-area"></div>
<ul id="customMenu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

然后，添加上简单的样式：

.custom-menu-area {
  width: 500px;
  height: 500px;
  background: green;
}
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  width: 100%;
  text-align: left;
  height: 45px;
  line-height: 45px;
  font-weight: bold;
}
li:hover {
  background: #f2f2f2;
}
#customMenu{
  visibility: hidden;
  position: absolute;
  top:0;
  left:0;
  z-index: 999;
  width:100px;
  background: yellow;
  text-align: center;
}

接下类处理下逻辑即可，具体看注释，因为比较简单就不进一步解释了：

const el = document.getElementById('customMenu')
const el2 = document.querySelector('.custom-menu-area')

// 禁止el2区域的右键鼠标默认事件，显示自定义的右键列表
el2.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  // 更新自定义右边列表的位置
  el.style.top = e.clientY + 'px';
  el.style.left = e.clientX + 'px';
  // 显示自定义右边列表
  el.style.visibility = 'visible';
})

// 在空白位置点击时，应该隐藏掉自定义右边列表
document.body.addEventListener('click', () => {
  el.style.visibility = 'hidden';
})

这样，很简单的一个示例，完整的说明了自定义鼠标右键列表的原理。
完整示例请查看自定义鼠标右键列表