> 웹 프론트엔드 > JS 튜토리얼 > js_javascript 스킬로 컨텍스트 메뉴를 호출하는 예

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

WBOY
풀어 주다: 2016-05-16 15:25:11
원래의
1181명이 탐색했습니다.

본 글의 예시에서는 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에서 컨텍스트 메뉴를 불러오는 방법을 알려드리겠습니다. 학습에 도움이 되길 바랍니다.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿