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

JAVASCRIPT / 글쓴이

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

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

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

답변

질문에 답하기- 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 피들

답변

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

$(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>

스 니펫 확장

답변

멋진 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%;}오른쪽에서 팽창이 왼쪽에있는 메뉴. 그래도 여백이나 무언가를 추가해야합니다.

답변

여기 및 다른 ‘흐름에 대한 답변에 따르면 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 전환을 추가하여 페이드 인 및 페이드 아웃하십시오!

코드 스 니펫 표시

답변

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

<body oncontextmenu="return false;">

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

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

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

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

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

답변

<!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에서 테스트 및 작동합니다. 자바 스크립트 오른쪽 클릭 메뉴 에서 작동하는 샘플을 확인할 수 있습니다

답변

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

코드 펜 예제