純 javascript 做右鍵選單

因為在寫 AngularJS 所以很多時候要用純 js 寫東西(這樣好像自宮喔)，所以看了一下怎麼寫右鍵選單，其實原理也還蠻簡單的。

首先準備一下 css ，等等按了右鍵讓這個 box 跟著跑，其他就不難了。

view plaincopy to clipboardprint

1. #box{   
2.     width:60px;   
3.     height:60px;   
4.     background:#ccc;   
5.     border-radius: 4px;   
6.     position: absolute;   
7.     left:10px;   
8.     top:20px;   
9. }  

讓 box 的 position 設為 absolute ，就可以四處跑了。


然後加一段按了右鍵後，改變 box 的位置就好了。

右鍵的事件是 contextmenu

view plaincopy to clipboardprint

1. document.addEventListener('contextmenu', function(e) {   
2.     _x=e.clientX;   
3.     _y=e.clientY;   
4.     document.getElementById("box").style.left=_x+"px";   
5.     document.getElementById("box").style.top=_y+"px";   
6.     e.preventDefault();   
7. }, false);  

Demo