RightButton_Menu 1 / RightButton_Menu 2 / RightButton_Menu 3

<style type="text/css">
#rightMenu { 
	position:absolute; top:0px; left:0px; 
	width:100px; visibility:hidden; padding:10px; 
	background-color:yellow; layer-background-color:yellow;
}
</style>
<div id=rightMenu>
<a href="#" onClick="history.go(-1); return false">[뒤로]</a><br>
<a href="#" onClick="self.location.reload(); return false">[새로고침]</a><br>
<a href="#" onClick="self.location.href = 'view-source:' + self.location.href; return false">[소스보기]</a>
<a href="#top">[T O P]</a>
</div>

오른쪽 마우스를 눌렀을 때, 나오는 매뉴는 nn4에서는 mousedown이고 ie4, ie5에서는 mouseup입니다. 이것은 브라우저 업체의 문서에서도 보지 못했는 것입니다. 그런데, 어떻게 알았냐고요..? 가장 확실한 문서라고 할 수 있는 브라우저 자체입니다. 마우스를 눌러보세요.. 그러면 어떻게 동작하는지 알것입니다. (!! 여기서 ie4에서 mousedown 이벤트를 사용하면 여러번 동작시 다운될 수 있습니다.)

아래로 페이지 아무데나 마우스로 눌러도 작동 시키기 위해서 document에 myMenu 이벤트를 지정합니다.

if(document.layers) { 
	document.captureEvents(Event.MOUSEDOWN); 
	document.onmousedown = myMenu;
}
if(document.all) {
	document.onmouseup = myMenu;
}

function myMenu(e) {
  if (document.layers && document.rightMenu) { 
    if (e.which == 1) {
      setTimeout('document.rightMenu.visibility = "hidden"', 10)
    }
    else if (e.which == 3) {
      document.rightMenu.left = e.pageX
      document.rightMenu.top = e.pageY
      document.rightMenu.visibility = "visible";
      return false; 
  }
}
else if (document.all && document.all.rightMenu) {
    if (event.button == 1) {
      setTimeout('rightMenu.style.visibility = "hidden";', 10); 
    }
    else if (event.button == 2) {
      rightMenu.style.posLeft = event.clientX + document.body.scrollLeft 
      rightMenu.style.posTop = event.clientY + document.body.scrollTop 	
      rightMenu.style.visibility = "visible";
      rightMenu.focus(); 
    }
  }
}

그러면 ie4에서의 문제를 어떻게 극복할까요..? 마우스 오른쪽 단추를 눌렀을 때, 어떻게 매뉴를 닫나요..? 매뉴 외의 브라우저 공간을 누르면 매뉴가 닫힙니다. 이것은 매뉴가 focus를 잃어서 나옵니다. 이런 경우에는 blur 이벤트가 브라우저 안에 내장되어 있을 것입니다. 우리는 단순히 다른 곳에다가 마우스로 누르면 됩니다. 이 다른곳에 마우스를 누르는 것 또한 이벤트입니다.

단순히, 웹 페이지를 눌렀지만, 브라우저 에게는 여러 이벤트가 갑니다. 먼저 mousedown이 가고 click, focus, mouseup 이벤트가 차례로 갑니다. focus 이벤트가 갑니다. 그러니 브라우저 자체의 매뉴는 blur를 실행하여 매뉴가 나오기도 전에 닫히는 것입니다. 이것을 하기 위해서 위의 myMenu 함수에서 아래로 focus를 다른 곳에 줍니다.

  else if (document.all) {
      rightMenu.focus(); 
  }

RightButton_Menu 1 / RightButton_Menu 2 / RightButton_Menu 3