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