onmousedown 事件会在鼠标按键被按下时发生。
提示： 与 onmousedown 事件相关连得事件发生次序（ 鼠标左侧/中间 按钮）：
- onmousedown
- onmouseup
- onclick
与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):
- onmousedown
- onmouseup
- oncontextmenu
语法
在 HTML 中:
<element onmousedown="SomeJavaScriptCode">
在 JavaScript 中:
object.onmousedown=function(){SomeJavaScriptCode};
| 参数 | 描述 |
|---|---|
| SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript。 |
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