JS右击事件

onmousedown事件：

onmousedown 事件会在鼠标按键被按下时发生。

提示： 与 onmousedown 事件相关连得事件发生次序（鼠标左侧/中间按钮）：

onmousedown
onmouseup
onclick

与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):

onmousedown
onmouseup
oncontextmenu

语法

在 HTML 中:

<element onmousedown="SomeJavaScriptCode">

在 JavaScript 中:

object.onmousedown=function(){SomeJavaScriptCode};

参数	描述
SomeJavaScriptCode	必需。规定该事件发生时执行的 JavaScript。

clientX事件属性：

clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。

客户区指的是当前窗口。

语法：event.clientX

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.oncontextmenu=function(e){
e.preventDefault();  //去掉默认的contextmenu事件，否则会和右键事件同时出现。
var menu=document.querySelector("#menu");//给菜单一个位置显示出来
menu.style.left=e.clientX+'px';
menu.style.top=e.clientY+'px';
menu.style.width='125px';
}
//var menu=document.querySelector("#a");
//关闭右键菜单，很简单
//window.onclick=function(e){
//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
//　document.querySelector('#menu').style.height=0;
//}
function test(){

alert("test");
menu.style.width='0px';
}
</script>
<style type="text/css">
#menu{
width: 0; /*设置为0 隐藏自定义菜单*/
height: 125px;
overflow: hidden; /*隐藏溢出的元素*/
box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
position: absolute; /*自定义菜单相对与body元素进行定位*/
}
.menu{
width: 130px;
height: 25px;
line-height: 25px;
padding: 0 10px;
}
</style>
</head>
<body>
 
<!--自定义右键菜单html代码-->
<div id="menu">
<div class="menu" id="a" onclick=test()>功能1</div>
<div class="menu">功能2</div>
<div class="menu">功能3</div>
<div class="menu">功能4</div>
<div class="menu">功能5</div>
</div>
 
</body>
</html>

参考：https://www.cnblogs.com/splitgroup/p/6921069.html