Node.js는 마우스 오른쪽 버튼 클릭 메뉴 기능을 구현합니다.-JS 튜토리얼-php.cn

Node.js는 마우스 오른쪽 버튼 클릭 메뉴 기능을 구현합니다.

高洛峰

풀어 주다： 2016-12-05 09:35:30

원래의

1738명이 탐색했습니다.

이 글에서 해결한 문제: 1. 마우스 오른쪽 버튼 클릭 메뉴 기능 코드 구현, 2. 기본 이벤트의 실제 적용 방지.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>右键菜单</title>
 <style type="text/css">
  #menu {
   position: fixed;
   left:0;
   top:0;
   width:200px;
   height: 400px;
   background-color: blue;
   display: none;
  }
 </style>
</head>
<body>
 <div id="menu">
 
 </div>
 <script type="text/javascript">
 var menu = document.getElementById("menu");
 document.oncontextmenu = function(e) {
  var e = e || window.event;
  //鼠标点的坐标
  var oX = e.clientX;
  var oY = e.clientY;
  //菜单出现后的位置
  menu.style.display = "block";
  menu.style.left = oX + "px";
  menu.style.top = oY + "px";
  //阻止浏览器默认事件
  return false;//一般点击右键会出现浏览器默认的右键菜单，写了这句代码就可以阻止该默认事件。
 }
 document.onclick = function(e) {
   var e = e || window.event;
   menu.style.display = "none"
  }
 menu.onclick = function(e) {
  var e = e || window.event;
  e.cancelBubble = true;
 }
 // document.addEventListener("contextmenu",function(e){
 // var e = e || window.event;
 // e.preventDefault();
 // alert("menu");
 // },false)
 </script>
</body>
</html>

로그인 후 복사