Javascriptista

ブラウザ画面の上で右クリックを押すとブラウザ自身のメニューが表示されます。これを打ち消し、独自のコンテキストメニューを表示させることができます。

SAMPLE
確認環境： I.E.8、Firefox3.6、Safari5.0.5解説

---

<script type="text/javascript">
var onMouse = false;

window.onload=function(){
  //クリック時のイベント登録
  document.onmousedown = dropMenu;
  //右クリック時イベント登録
  document.oncontextmenu = showMenu;

  //メニューフォーカス時はクリックで消さないようにする。
  var tarElement = document.getElementById('contextMenu');
  tarElement.onmouseover  = mouseOver;
  tarElement.onmouseout  = mouseOut;
}

function showMenu(e){
  var tarElement = document.getElementById('contextMenu');
 
  //※マウスの位置を取得するオブジェクトが異なるの腹立つ
  if (!e) { /* I.E. */
    //スクロール値の取得は、I.Eの7以降と異なる。互換性がない。
    pageX = event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
    pageY = event.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
  } else { /* firefox */
    pageX = e.pageX;
    pageY = e.pageY;
  }
  tarElement.style.left = pageX + 'px';
  tarElement.style.top = pageY + 'px';
  tarElement.style.display = 'block';
  return false;
}

function dropMenu(e){
  if(!onMouse){
    var tarElement = document.getElementById('contextMenu');
    tarElement.style.display = 'none';
  }
  return false;
}

/*
 * コンテキストメニュー内でクリックされた場合、コンテキストメニューを消してはならない。
 */
function mouseOver(e){
  onMouse = true;
}

/*
 * コンテキストメニュー内でクリックされた場合、コンテキストメニューを消してはならない。
 */
function mouseOut(e){
  onMouse = false;
}
</script>

---

・window.onload
HTML読み込み時に実行されます。
以下のイベントを登録します。
・クリック時にコンテキストメニュー削除
・クリック時にコンテキストメニュー表示
ただし、メニューのリンクをカーソルでクリックした時、メニューを消されないように以下のイベントも登録する必要があります。
・メニューにマウスが重なっている場合、クリックを無効にする。
・メニューにマウスが重なっていない場合、クリックを有効にする。

・showMenu
右クリックを押された時点で、マウスの位置を読み込み、そこにメニューを表示させます。

・dropMenu
マウスがメニューに重なっていない場合のみ、コンテキストメニューを非表示にします。

---

※課題
画面の右下で右クリックされた場合は、マウスの左上に表示させようとしたが、メニューの高さを取得できなかった。動的なテーブルの高さを取得する方法は調査中