웹 페이지에 사용자 정의 오른쪽 클릭 메뉴를 추가하는 방법은 무엇입니까?

291

웹 응용 프로그램에 사용자 정의 마우스 오른쪽 버튼 메뉴를 추가하고 싶습니다. 사전 빌드 된 라이브러리를 사용하지 않고도이 작업을 수행 할 수 있습니까? 그렇다면 타사 JavaScript 라이브러리를 사용하지 않는 간단한 사용자 정의 마우스 오른쪽 버튼 메뉴를 표시하는 방법은 무엇입니까?

Google 문서 도구와 같은 것을 목표로하고 있습니다. 사용자가 마우스 오른쪽 버튼을 클릭하여 자신의 메뉴를 표시 할 수 있습니다.

참고 : 대부분의 시간 이후 이미 만들어진 것을 사용하는 것과 비교하여 내 자신을 만드는 방법을 배우고 싶습니다. 이러한 타사 라이브러리에는 기능이 풍부하지만 필요한 기능 만 원하므로 완전히 손으로 직접 만들고 싶습니다. 나를.

javascript  contextmenu  right-click 
— 등록 된 사용자
소스
3
단지 우연히 : davidwalsh.name/html5-context-menu 사랑 HTML5
— TD_Nijboer
2
이것은 분명히 복제본이 아닙니다. 질문에 타사 라이브러리가없는 답변이 필요하고 다른 하나는 Jquery를 사용할 가능성이 높습니다 (사용자 스크립트 내부에 컨텍스트 메뉴와 같은 Google 드라이브를 작성하고 싶었습니다) .
— user2284570
바로 오늘 나는 이것에 대해 두 가지 더 좋은 예를 발견했습니다 ( DEMO 1 // DEMO 2 (이 데모에는 jquery UI 가 필요합니다 )).
— Drako
2
HTML5 컨텍스트 메뉴는 Firefox의 일부 버전에서만 지원되며 다른 기능은 지원하지 않는다는 점을 지적하고 싶습니다. 버전 61 현재 Chrome은 지원하지 않습니다.
— Dan Willett
2
React- 기본 메뉴를 사용하는 사용자의 경우 기본 메뉴는 기본 기능 (브라우저에 따라 다른 스타일 적용)으로 기존 기능 (복사, 새 탭에서 열기, Google 검색 등)을 모두 복제 합니다 . 데모
— samdd

답변:

247

질문에 답하기- contextmenu아래와 같이 이벤트를 사용하십시오 .

if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    alert("You've tried to open context menu"); //here you draw your own menu
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    alert("You've tried to open context menu");
    window.event.returnValue = false;
  });
}
<body>
  Lorem ipsum...
</body>
스 니펫 확장

그러나 기본 마우스 오른쪽 클릭 동작을 덮어 쓰고 싶습니까? 이는 개발중인 응용 프로그램에 따라 다릅니다.

JS 피들

— 라덱 벤켈
소스
12
Opera 11.01, Firefox 3.6.13, Chrome 9, Safari 5 (addEventListener를 통해 4 개) 및 IE 8 (attachEvent)에서 테스트되었습니다.
— Radek Benkel
54
오른쪽 클릭 메뉴를 비활성화하는 방법을 설명했습니다. 우리만의 메뉴를 만드는 방법 ??
— Shashwat
13
@Shashwat 사용자가 클릭 한 위치를 알고 있으며 원래 메뉴가 없습니다. 그 장소에 컨테이너를 만들고 거기에 메뉴를 표시하십시오.
— Radek Benkel
2
맞습니다. developer.mozilla.org/en-US/docs/DOM/element.addEventListener Document도 요소입니다.
— Radek Benkel
4
@shanehoban 코드를 살펴보면이 줄이 나타납니다 e.preventDefault();. 이것이 일반 메뉴가 표시되지 않는 이유입니다. 당신이 할 수있는 것은 마우스 오른쪽 버튼을 클릭하고 호출하지 않는 동안 키를 눌렀는지 확인하는 조건부 논리를 만드는 e.preventDefault()것입니다. 그러면 일반 브라우저 메뉴가 나타납니다.
— Radek Benkel
54

나에게 매우 유용했다. 나 같은 사람들을 위해 메뉴 그리기를 기대하면서 오른쪽 클릭 메뉴를 만드는 데 사용한 코드를 여기에 넣습니다.

$(document).ready(function() {


  if ($("#test").addEventListener) {
    $("#test").addEventListener('contextmenu', function(e) {
      alert("You've tried to open context menu"); //here you draw your own menu
      e.preventDefault();
    }, false);
  } else {

    //document.getElementById("test").attachEvent('oncontextmenu', function() {
    //$(".test").bind('contextmenu', function() {
    $('body').on('contextmenu', 'a.test', function() {


      //alert("contextmenu"+event);
      document.getElementById("rmenu").className = "show";
      document.getElementById("rmenu").style.top = mouseY(event) + 'px';
      document.getElementById("rmenu").style.left = mouseX(event) + 'px';

      window.event.returnValue = false;


    });
  }

});

// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});



function mouseX(evt) {
  if (evt.pageX) {
    return evt.pageX;
  } else if (evt.clientX) {
    return evt.clientX + (document.documentElement.scrollLeft ?
      document.documentElement.scrollLeft :
      document.body.scrollLeft);
  } else {
    return null;
  }
}

function mouseY(evt) {
  if (evt.pageY) {
    return evt.pageY;
  } else if (evt.clientY) {
    return evt.clientY + (document.documentElement.scrollTop ?
      document.documentElement.scrollTop :
      document.body.scrollTop);
  } else {
    return null;
  }
}
.show {
  z-index: 1000;
  position: absolute;
  background-color: #C0C0C0;
  border: 1px solid blue;
  padding: 2px;
  display: block;
  margin: 0;
  list-style-type: none;
  list-style: none;
}

.hide {
  display: none;
}

.show li {
  list-style: none;
}

.show a {
  border: 0 !important;
  text-decoration: none;
}

.show a:hover {
  text-decoration: underline !important;
}
<!-- jQuery should be at least version 1.7 -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="contextmenu.js"></script>
<link rel="stylesheet" href="contextmenu.css" />


<div id="test1">
  <a href="www.google.com" class="test">Google</a>
  <a href="www.google.com" class="test">Link 2</a>
  <a href="www.google.com" class="test">Link 3</a>
  <a href="www.google.com" class="test">Link 4</a>
</div>

<!-- initially hidden right-click menu -->
<div class="hide" id="rmenu">
  <ul>
    <li>
      <a href="http://www.google.com">Google</a>
    </li>

    <li>
      <a href="http://localhost:8080/login">Localhost</a>
    </li>

    <li>
      <a href="C:\">C</a>
    </li>
  </ul>
</div>
스 니펫 확장

— 모하메드 이크 자
소스
7
@Schism Suffixed mouseY(event)및 http://jsfiddle.net/a6w7n64o/ 와 mouseX(event)함께 px작동 합니다.
— zanetu
3
id로 요소를 참조하고 test있지만 id로 요소가 없습니다 test. 의 클래스 만 요소 test.
— 마샬 공작 שלום
1
@Adelphia-네이티브가 아니며 스스로 생성하지 않은 것은 제 3 자입니다. jQuery여분의 물건으로 가득한 것은 아닙니다. 속도가 느려지는 정도는 아닙니다. 매우 유용 jQuery하며이 답변에 사용 된 것과 동일 하게 표준 JavaScript명령으로 쉽게 변환 할 수 있습니다 . 원래 질문의 요청과 100 % 인라인은 아니지만 95 % 인라인입니다.
— 마샬 공작 שלום
6
파이어 폭스 39에서 기본 컨텍스트 메뉴는 여전히 커스텀 메뉴의 상단에 나타납니다. 또한 사용자 정의 메뉴는 표시 후 즉시 사라집니다.
— Matt
1
: @ 매트이 게시물은 나를 위해 작동하는 솔루션에 대해 설명 파이어 폭스 58와 같은 문제가 있었다 stackoverflow.com/a/40545465/2922675 문서에 대해 당신에게 비활성화 이벤트 전파하고 창 개체에 컨텍스트 메뉴 핸들러를 등록 . 조정 된 바이올린은 다음과 같습니다. jsfiddle.net/jjgkLe3g/1
— Nils-o-mat
27

멋진 CSS와 외부 라이브러리가없는 비표준 html 태그의 조합은 좋은 결과를 줄 수 있습니다 (JSFiddle)

HTML

<menu id="ctxMenu">
    <menu title="File">
        <menu title="Save"></menu>
        <menu title="Save As"></menu>
        <menu title="Open"></menu>
    </menu>
    <menu title="Edit">
        <menu title="Cut"></menu>
        <menu title="Copy"></menu>
        <menu title="Paste"></menu>
    </menu>
</menu>

참고 : 메뉴 태그가 존재하지 않습니다. 메이크업 중입니다 (아무것도 사용할 수 있습니다)

CSS

#ctxMenu{
    display:none;
    z-index:100;
}
menu {
    position:absolute;
    display:block;
    left:0px;
    top:0px;
    height:20px;
    width:20px;
    padding:0;
    margin:0;
    border:1px solid;
    background-color:white;
    font-weight:normal;
    white-space:nowrap;
}
menu:hover{
    background-color:#eef;
    font-weight:bold;
}
menu:hover > menu{
    display:block;
}
menu > menu{
    display:none;
    position:relative;
    top:-20px;
    left:100%;
    width:55px;
}
menu[title]:before{
    content:attr(title);
}
menu:not([title]):before{
    content:"\2630";
}

자바 스크립트는 그냥 예를 들어, 나는 개인적으로 창문에 지속적 메뉴에 대한 제거한다

var notepad = document.getElementById("notepad");
notepad.addEventListener("contextmenu",function(event){
    event.preventDefault();
    var ctxMenu = document.getElementById("ctxMenu");
    ctxMenu.style.display = "block";
    ctxMenu.style.left = (event.pageX - 10)+"px";
    ctxMenu.style.top = (event.pageY - 10)+"px";
},false);
notepad.addEventListener("click",function(event){
    var ctxMenu = document.getElementById("ctxMenu");
    ctxMenu.style.display = "";
    ctxMenu.style.left = "";
    ctxMenu.style.top = "";
},false);

또한 잠재적으로 수정할 수 있습니다 menu > menu{left:100%;}에 menu > menu{right:100%;}오른쪽에서 팽창이 왼쪽에있는 메뉴. 그래도 여백이나 무언가를 추가해야합니다.

— 이삭
소스
20

여기 및 다른 '흐름에 대한 답변에 따르면 css3 전환을 사용하여 Chrome과 유사한 버전을 만들었습니다. JS Fiddle

이 페이지에 위의 j가 있으므로 CSS와 레이아웃에 대해 걱정할 수 있습니다. 사용할 레이아웃 <a>은 <img>요소 또는 멋진 글꼴 아이콘 ( <i class="fa fa-flag"></i>)과 <span>키보드 단축키를 표시 하는 요소가있는 요소 입니다. 이것이 구조입니다 :

<a href="#" onclick="doSomething()">
  <img src="path/to/image.gif" />
  This is a menu option
  <span>Ctrl + K</span>
</a>

우리는 이것을 div에 넣고 마우스 오른쪽 버튼으로 해당 div를 보여줍니다. Chrome처럼 스타일을 지정해 보겠습니다.

#menu a {
  display: block;
  color: #555;
  text-decoration: no[...]

이제 우리는 허용 된 답변으로부터 코드를 추가하고 커서의 X와 Y 값을 얻습니다. 이를 위해 우리는 e.clientX및 을 사용할 것 e.clientY입니다. 우리는 클라이언트를 사용하고 있으므로 메뉴 div를 수정해야합니다.

var i = document.getElementById("menu").style;
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    var posX = e.clientX;
    var posY = e.client[...]

그리고 그게 다야! CSS 전환을 추가하여 페이드 인 및 페이드 아웃하십시오!

코드 스 니펫 표시

— 스테판 스타니 식
소스
이것은 나에게 큰 머리 아픔을 저장했다! OP가 div가 아닌 전체 웹 페이지에서 사용하는 간단한 방법을 찾고 있다면 다음과 같이 대답해야합니다.)
— Woody
12

body 태그에 다음을 추가하여 컨텍스트 메뉴를 간단히 차단할 수 있습니다.

<body oncontextmenu="return false;">

마우스 오른쪽 버튼뿐만 아니라 키보드에서도 상황에 맞는 메뉴에 대한 모든 액세스를 차단합니다.

추신 : 당신은 컨텍스트 메뉴를 비활성화하려는 모든 태그에 이것을 추가 할 수 있습니다

예를 들면 다음과 같습니다.

<div class="mydiv" oncontextmenu="return false;">

해당 특정 div에서만 상황에 맞는 메뉴를 비활성화합니다.

— by0
소스
10 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>

<title>Context menu - LabLogic.net</title>

</head>
<body>

<script language="javascript" type="text/javascript">

document.oncontextmenu=RightMouseDown;
document.onmousedown = mouseDown; 



function mouseDown(e) {
    if (e.which==3) {//righClick
        alert("Right-click menu goes here");
    }
}


function RightMouseDown() { return false; }

</script>

</body>
</html>

Opera 11.6, firefox 9.01, Internet Explorer 9 및 chrome 17에서 테스트 및 작동합니다. 자바 스크립트 오른쪽 클릭 메뉴 에서 작동하는 샘플을 확인할 수 있습니다

— LabLogic
소스
작동하지만 페이지의 데모 메뉴는 정말 작고 비좁습니다. 그래도 좋은 예입니다.
— David Millar
2
3 버튼 마우스를 사용하는 경우 작동합니다. Ctrl 키를 누르면 사용자가 높고 건조합니다. @Singles는 상상력에 약간의 영향을 주더라도 더 나은 제안을합니다.
— AJFarkas
7

나는이 이미 답을 알지만, 나는 사라질 때까지 기본 컨텍스트 메뉴를 얻기 위해 두 번째 답 시간이 레슬링을 소비 하고 사용자가 클릭 한 위치가 표시해야합니다.
HTML

<body>
    <div id="test1">
        <a href="www.google.com" class="test">Google</a>
        <a href="www.google.com" class="test">Link 2</a>
        <a href="www.google.com" class="test">Link 3</a>
        <a href="www.google.com" class="test">Link 4</a>
    </div>

    <!-- initially hidden right-click menu -->
    <div class="hide" id="rmenu">
        <ul>
            <li class="White">White</li>
            <li>Green</li>
            <li>Yellow</li>
            <li>Orange</li>
            <li>Red</li>
            <li>Blue</li>
        </ul>
    </div>
</body>

CSS

.hide {
  display: none;
}

#rmenu {
  border: 1px solid black;
  background-color: white;
}

#rmenu ul {
  padding: 0;
  list-style: none;
}
#rmenu li
{
  list-style: none;
  padding-left: 5px;
  padding-right: 5px;
}

자바 스크립트

if (document.getElementById('test1').addEventListener) {
    document.getElementById('test1').addEventListener('contextmenu', function(e) {
            $("#rmenu").toggleClass("hide");
            $("#rmenu").css(
              {
                position: "absolute",
                top: e.pageY,
                left: e.pageX
              }
            );
            e.preventDefault();
     }, false);
}

// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});

코드 펜 예제

— 크리스틴 닐슨
소스
6

이 시도

$(function() {
var doubleClicked = false;
$(document).on("contextmenu", function (e) {
if(doubleClicked == false) {
e.preventDefault(); // To prevent the default context menu.
var windowHeight = $(window).height()/2;
var windowWidth = $(window).width()/2;
if(e.clientY > windowHeight && e.clientX <= windowWidth) {
  $("#contextMenuContainer").css("left", e.clientX);
  $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
  $("#contextMenuContainer").css("right", "auto");
  $("#contextMenuContainer").css("top", "auto");
} else if(e.clientY > windowHeight && e.clientX > windowWidth) {
  $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
  $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
  $("#contextMenuContainer").css("left", "auto");
  $("#contextMenuContainer").css("top", "auto");
} else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
  $("#contextMenuContainer").css("left", e.clientX);
  $("#contextMenuContainer").css("top", e.clientY);
  $("#contextMenuContainer").css("right", "auto");
  $("#contextMenuContainer").css("bottom", "auto");
} else {
  $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
  $("#contextMenuContainer").css("top", e.clientY);
  $("#contextMenuContainer").css("left", "auto");
  $("#contextMenuContainer").css("bottom", "auto");
}
 $("#contextMenuContainer").fadeIn(500, FocusContextOut());
  doubleClicked = true;
} else {
  e.preventDefault();
  doubleClicked = false;
  $("#contextMenuContainer").fadeOut(500);
}
});
function FocusContextOut() {
 $(document).on("click", function () {
   doubleClicked = false; 
   $("#contextMenuContainer").fadeOut(500);
   $(document).off("click");           
 });
}
});

http://jsfiddle.net/AkshayBandivadekar/zakn7Lwb/14/

— AkshayBandivadekar
소스
코드는 훌륭하지만 OP 문제가 실제로 무엇이며 어떻게 해결되는지에 대한 설명을 포함하십시오.
— Rory McCrossan
이 솔루션이 마음에 들지만 파이어 폭스 39에서는 메뉴가 나타난 직후 메뉴가 사라집니다.
— Matt
이 솔루션은 페이지에 강제로 스크롤을 가하고 (예 : 여러 개의 태그를 추가) 페이지 하단에있는 경우 실제로 작동하지 않습니다.
— DanielM
이것이 작동하려면 pageX와 pageY 대신 clientX와 clientY를 사용해야합니다. 이 위대한 답변을 확인하십시오 : stackoverflow.com/questions/9262741/…
— DanielM
예, DanielM은 스크롤하는 동안 마우스 오른쪽 버튼 메뉴에 문제가 있으므로 pageX 및 pageY 대신 clientX와 clientY를 사용하여 극복했습니다. 코드를 변경했습니다. 도움을 주셔서 감사합니다 ...
— AkshayBandivadekar
5

진정한 동적 마우스 오른쪽 버튼으로 클릭 컨텍스트 메뉴에 대한 순수 JS 및 CSS 솔루션 임에도 불구 요소의 ID, 링크 등 미리 정의 된 이름 지정 규칙에 따라 jsfiddle 하고 단일 정적 HTML 페이지에 붙여 넣기 복사 할 수있는 코드 :

<html>

<head>
  <style>
    .cls-context-menu-link {
      display: block;
      padding: 20px;
      background: #ECECEC;
    }
    
    .cls-context-menu {
      position: absolute;
      display: none;
    }
    
    .cls-context-menu ul,
    #context-menu li {
      list-style: none;
      margin: 0;
      padding: 0;
      background: white;
    }
    
    .cls-context-menu {
      border: solid 1px #CCC;
    }
    
    .cls-context-menu li {
      border-bottom: solid 1px #CCC;
    }
    
    .cls-context-menu li:last-child {
      border: none;
    }
    
    .cls-context-menu li a {
      display: block;
      padding: 5px 10px;
      text-decoration: none;
      color: blue;
    }
    
    .cls-context-menu li a:hover {
      background: blue;
      color: #FFF;
    }
  </style>
</head>

<body>

  <!-- those are the links which should present the dynamic context menu -->
  <a id="link-1" href="#" class="cls-context-menu-link">right click link-01</a>
  <a id="link-2" href="#" class="cls-context-menu-link">right click link-02</a>

  <!-- this is the context menu -->
  <!-- note the string to=0 where the 0 is the digit to be replaced -->
  <div id="div-context-menu" class="cls-context-menu">
    <ul>
      <li><a href="#to=0">link-to=0 -item-1 </a></li>
      <li><a href="#to=0">link-to=0 -item-2 </a></li>
      <li><a href="#to=0">link-to=0 -item-3 </a></li>
    </ul>
  </div>

  <script>
    var rgtClickContextMenu = document.getElementById('div-context-menu');

    /** close the right click context menu on click anywhere else in the page*/
    document.onclick = function(e) {
      rgtClickContextMenu.style.display = 'none';
    }

    /**
     present the right click context menu ONLY for the elements having the right class
     by replacing the 0 or any digit after the "to-" string with the element id , which
     triggered the event
    */
    document.oncontextmenu = function(e) {
      //alert(e.target.id)
      var elmnt = e.target
      if (elmnt.className.startsWith("cls-context-menu")) {
        e.preventDefault();
        var eid = elmnt.id.replace(/link-/, "")
        rgtClickContextMenu.style.left = e.pageX + 'px'
        rgtClickContextMenu.style.top = e.pageY + 'px'
        rgtClickContextMenu.style.display = 'block'
        var toRepl = "to=" + eid.toString()
        rgtClickContextMenu.innerHTML = rgtClickContextMenu.innerHTML.replace(/to=\d+/g, toRepl)
        //alert(rgtClickContextMenu.innerHTML.toString())
      }
    }
  </script>
</body>

</html>
스 니펫 확장

— 요르단 게오르기 프
소스
이 예는 실제로 마우스 오른쪽 버튼으로 클릭 메뉴를 수정, 더 내가 기대했던 대답은
— 제시 레자 Khorasanee
yup, 비슷한 예는 다음과 같습니다. codepen.io/yordangeorgiev/pen/GzWJzd 및 최종 제품 : qto.fi/qto/view/concepts_doc (로그인을 클릭하십시오 ...)
— 요르단 게오르기 프
3

다음은 전체 작업 코드 예제 (JQuery 및 기타 라이브러리없이) 로 사용자 정의 컨텍스트 메뉴 를 작성하는 방법에 대한 매우 유용한 학습서입니다 .

데모 코드는 GitHub 에서도 찾을 수 있습니다 .

여기에는 html, css 및 javascript 코드를 포함하여 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴를 작성하고 완전한 예제 코드를 제공하여 마지막에 요약 할 수있는 자세한 단계별 설명이 제공됩니다.

쉽게 따라하고 자신의 필요에 맞게 조정할 수 있습니다. 그리고 JQuery 나 다른 라이브러리가 필요하지 않습니다.

예제 메뉴 코드는 다음과 같습니다.

<nav id="context-menu" class="context-menu">
    <ul class="context-menu__items">
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="View"><i class="fa fa-eye"></i> View Task</a>
      </li>
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="Edit"><i class="fa fa-edit"></i> Edit Task</a>
      </li>
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="Delete"><i class="fa fa-times"></i> Delete Task</a>
      </li>
    </ul>
  </nav>

실제 예제 (작업 목록)는 codepen에서 찾을 수 있습니다 .

— ForceOfWill
소스
간단한 요약은 리뷰어 (나 같은)가 답변의 유효성을 판단하는 데 도움이되고 일부 독자는 해당 링크를 따르지 않아도됩니다. 한두 문장만으로도 충분하고 많은 일을하지는 않을 것입니다.
— Ingo Karkat
@IngoKarkat 조언 해 주셔서 감사합니다. 나는 약간의 설명을 추가했다. 도움이 되길 바랍니다. 그것은 많은 도움이되었습니다.
— ForceOfWill
2

이 코드로 할 수 있습니다. 자동 가장자리 감지 기능이 포함 된 전체 자습서를 보려면 여기를 방문하십시오. http://www.voidtricks.com/custom-right-click-context-menu/ 

$(document).ready(function () {
 $("html").on("contextmenu",function(e){
        //prevent default context menu for right click
        e.preventDefault();

        var menu = $(".menu"); 

        //hide menu if already shown
        menu.hide(); 

        //get x and y values of the click event
        var pageX = e.pageX;
        var pageY = e.pageY;

        //position menu div near mouse cliked area
        menu.css({top: pageY , left: pageX});

        var mwidth = menu.width();
        var mheight = menu.height();
        var screenWidth = $(window).width();
        var screenHeight = $(window).height();

        //if window is scrolled
        var scrTop = $(window).scrollTop();

        //if the menu is close to right edge of the window
        if(pageX+mwidth > screenWidth){
        menu.css({left:pageX-mwidth});
        }

        //if the menu is close to bottom edge of the window
        if(pageY+mheight > screenHeight+scrTop){
        menu.css({top:pageY-mheight});
        }

        //finally show the menu
        menu.show();
 }); 

 $("html").on("click", function(){
 $(".menu").hide();
 });
 });

`

— 아난드 로샨
소스
1 
<script language="javascript" type="text/javascript">
  document.oncontextmenu = RightMouseDown; 
  document.onmousedown = mouseDown; 

  function mouseDown(e) {
    if (e.which==3) {//righClick
      alert("Right-click menu goes here");
    } 
  }

  function RightMouseDown() { 
    return false; 
  }
</script>
</body> 
</html>
— 그레이엄 앨런
소스
2
당신은 oncontextmenu이벤트가 발생 한다는 것을 알고 있습니다 (보통 우클릭)
— megawac
1

간단한 방법은 onContextMenu를 사용하여 JavaScript 함수를 반환하는 것입니다.

<input type="button" value="Example" onContextMenu="return RightClickFunction();">

<script>
 function RightClickFunction() {
  // Enter your code here;
  return false;
 }
</script>

그리고 입력 return false;하면 상황에 맞는 메뉴가 취소됩니다.

여전히 상황에 맞는 메뉴를 표시하려면 해당 return false;줄을 제거하면 됩니다.

— 에픽 닌자 치즈
소스
1

Opera 12.17, firefox 30, Internet Explorer 9 및 Chrome 26.0.1410.64에서 테스트 및 작동 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
— 라펠
소스
1
상황에 맞는 메뉴가 나타날 때 경고가 표시되지 않습니까? 어떻게 커스터마이즈하는지 모르겠습니다.
— Stephen Ostermiller
1 
<script>
function fun(){
document.getElementById('menu').style.display="block";
}

</script>
<div id="menu" style="display: none"> menu items</div>

<body oncontextmenu="fun();return false;">

내가 여기서하는 일

  1. 나만의 맞춤 div 메뉴를 만들고 위치를 절대 및 표시 : 없음으로 설정하십시오.
  2. oncontextmenu 이벤트를 클릭 할 페이지 또는 요소에 추가하십시오.
  3. false를 리턴하여 기본 브라우저 조치를 취소하십시오.

  4. 사용자 js는 자신의 조치를 호출합니다.

— 크리스 에니 탄
소스
0

Firefox 전용 솔루션을 사용하려면 전체 문서에 추가하려는 경우 추가해야합니다. contextmenu="mymenu" 하려는 경우 <html>태그가 아닌 태그에body .
이것에주의해야합니다.

— 와우
소스
0 
<html>
<head>
<style>
.rightclick {
    /* YOUR CONTEXTMENU'S CSS */
    visibility: hidden;
    background-color: white;
    border: 1px solid grey;
    width: 200px;
    height: 300px;
}
</style>
</head>
<body>
  <div class="rightclick" id="ya">
    <p onclick="alert('choc-a-late')">I like chocolate</p><br><p onclick="awe-so-me">I AM AWESOME</p>
  </div>
  <p>Right click to get sweet results!</p>
</body>
<script>
    document.onclick = noClick;
    document.oncontextmenu = rightClick;
    function rightClick(e) {
        e = e || window.event;
        e.preventDefault();
        document.getElementById("ya").style.visibility = "visible";
        console.log("Context Menu v1.3.0 by IamGuest opened.");
   }
function noClick() {
    document.getElementById("ya").style.visibility = "hidden";
    console.log("Context Menu v1.3.0 by IamGuest closed.");
}
</script>
<!-- Coded by IamGuest. Thank you for using this code! -->
</html>

이 코드를 수정하고 수정하여 더보기 좋고 효율적인 컨텍스트 메뉴를 만들 수 있습니다. 기존 상황에 맞는 메뉴를 수정하는 방법에 대해서는 잘 모르겠습니다 ... 체계화 된 관점 에서이 바이올린 을 확인하십시오 . 또한 컨텍스트 메뉴에서 항목을 클릭하십시오. 그들은 당신에게 몇 가지 멋진 메시지를 경고해야합니다. 그들이 작동하지 않으면 더 복잡한 것을 시도하십시오.

— 살균제
소스
0

다음 jsfiddle 과 비슷한 것을 사용합니다.

function onright(el, cb) {
    //disable right click
    document.body.oncontextmenu = 'return false';
    el.addEventListener('contextmenu', function (e) { e.preventDefault(); return false });
    el.addEventListener('mousedown', function (e) {
        e = e || window.event;
        if (~~(e.button) === 2) {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
            return false;
        }
    });

    // then bind Your cb
    el.addEventListener('mousedown', function (e) {
        e = e || window.event;
        ~~(e.button) === 2 && cb.call(el, e);
    });
}

이전 IE 브라우저를 대상으로하는 경우 어쨌든 'attachEvent; 케이스

— Fedeghe
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.