데모 :
<! DOCTYPE HTML> <HTML LANG = "EN"> <head> <메타 캐릭터 = "UTF-8"> <메타 이름 = "뷰포트"내용 = "폭 = 기기 폭 초기 스케일 = 1.0" > <메타 HTTP-당량 = "X-UA 호환"내용 = "즉 에지 ="> <TITLE> 문헌 </ TITLE> <스타일> .box {폭 : 200 픽셀, 높이 300 픽셀, 배경 : #ccc; 위치 : 절대; 왼쪽 : 0] 상단 : 0 ] 디스플레이 : 없음} .box UL {마진 : 0 } </ 스타일> </ head> <body> <- <A HREF = "http://www.baidu! .COM "> 21321312 </a>에 -> <클래스 = DIV "상자"> <UL> <LI> 옵션을 선택합니다. 1 </ 리튬> <LI> 옵션 2 </ 리> <LI> 옵션 3 </ 리> <LI> 옵션 4 </ 리> </ UL> </ DIV> </ BODY> <script> var에 Obox document.querySelector = (. "상자" ) 문서. 는 onContextMenu = 기능 (이브) {//는 onContextMenu 이벤트 요소를 트리거하고 사용자가 마우스를 마우스 오른쪽 버튼으로 클릭하면 컨텍스트 메뉴를 엽니 다. var에 E = || 이브를 window.event를, obox.style.display = "차단" ; // false로 반환; // 기본 이벤트 취소 stopDefault (E)를, obox.style.left = e.offsetX + "PX" ; Obox .style.top = e.offsetY + "PX" } = 함수 () { obox.style.display = "NONE" } 함수 stopDefault (E) { 경우 (e.preventDefault) { e.preventDefault () // IE 한다} else { e.returnValue = 거짓; // GOOGLE } } //封装函数 </ script> </ HTML>