js_javascript 스킬로 컨텍스트 메뉴를 호출하는 예

본 글의 예시에서는 js를 통해 컨텍스트 메뉴를 호출하는 예시 코드를 설명하고 있으며, 참고용으로 공유합니다.

원칙
사용자가 마우스 오른쪽 버튼을 클릭하면 상황에 맞는 메뉴 이벤트가 실행됩니다. 기본적으로 브라우저의 기본 상황에 맞는 메뉴가 실행됩니다. 이 기본 동작을 수동으로 차단하면 사용자 정의 상황에 맞는 메뉴가 표시됩니다. 클릭.
코드
1.html

<div id="box" style="color:red;width: 100%;height:1000px;" >
 <div id="left" style="float:left;width:500px;margin-left: 50px;height:500px;background: #cdeddf;">
  
 </div> 
 <div id="right" style="float:right;width:600px;margin-right: 50px;height:500px;background: #cdeaae;">
 </div>
 <ul id="menu" style="position: absolute;visibility: hidden;list-style: none;">
  <li>按钮1</li>
  <li>按钮2</li>
  <li>按钮3</li>
 </ul>
</div>

2.JS

// 添加contextmenu事件
 var right = document.getElementById("right");
 EventUtil.addEventListener(right, "contextmenu", function(event) {
 event = EventUtil.getEvent(event);
 EventUtil.preventDefault(event);
 var menu = document.getElementById("menu");
 
 // 获取鼠标右击时的坐标，并设置上下文菜单出现位置
 page = EventUtil.getPagePosition(event); 
 menu.style.left = page.pageX + "px";
 menu.style.top = page.pageY + "px";
 menu.style.visibility = "visible";
 });
 
 // 添加隐藏上下文菜单事件
 EventUtil.addEventListener(document, "click", function(event) {
 var menu = document.getElementById("menu");
 menu.style.visibility = "hidden";
 });

코드에 나타나는 EventUtil은 다음 기사에서 소개됩니다. "js 크로스 브라우저 이벤트 리스너 및 이벤트 객체 사용 방법"

위 내용이 이 글의 전체 내용입니다. js에서 컨텍스트 메뉴를 불러오는 방법을 알려드리겠습니다. 학습에 도움이 되길 바랍니다.