純 javascript 做右鍵選單

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

首先準備一下 css ,等等按了右鍵讓這個 box 跟著跑,其他就不難了。
  1. #box{   
  2.     width:60px;   
  3.     height:60px;   
  4.     background:#ccc;   
  5.     border-radius: 4px;   
  6.     positionabsolute;   
  7.     left:10px;   
  8.     top:20px;   
  9. }  

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


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

右鍵的事件是 contextmenu
  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

留言

熱門文章