コンテクストメニュー

コード

<body oncontextmenu="return ShowContextmenu();">

<div class="prohibit" style="width:200px;height:200px;background-color:yellow;" onclick="HideContextmenu()"></div>
<menu id="contextmenu">
<li><a onclick="HideContextmenu()">キャンセル</a></li>
<li><a onclick="HideContextmenu()">メニュー１</a></li>
<li><a onclick="HideContextmenu()">メニュー２</a></li>
<li><a onclick="HideContextmenu()">メニュー３</a></li>
</menu>

<script>
function HideContextmenu(){
	document.getElementById('contextmenu').style.display='none';
}

function ShowContextmenu(e,btn, cn){
	e=e||event;
	btn=e.button||e.which;
	cn=(e.target)?e.target.className:e.srcElement.className;
	if(btn<2 || cn.search(/prohibit/i)==-1 )
		return true;
	e.defaultValue=null;
	e.returnValue=null;
	if(e.stopPropagation){
		e.stopPropagation();
		e.preventDefault();
	}
	
	var mn=document.getElementById('contextmenu');
	with(mn.style){
		left=(e.x||e.pageX)+'px';
		top=(e.y||e.pageY)+'px';
		display='block';
	}
	
	return false;
}
window.oncontextmenu=ShowContextmenu;
window.onclick=ShowContextmenu;
</script>
サンプル

コード
