カスタムの右クリックメニューをWebページに追加する方法

291

Webアプリケーションにカスタムの右クリックメニューを追加したい。これは、事前に作成されたライブラリを使用せずに実行できますか？もしそうなら、サードパーティのJavaScriptライブラリを使用しないシンプルなカスタム右クリックメニューを表示する方法は？

Googleドキュメントのようなものを目指しています。これにより、ユーザーは右クリックして独自のメニューを表示できます。

注：ほとんどの場合、これらのサードパーティライブラリは機能で肥大化しているので、自分で作成する方法と、誰かがすでに作成したものを使用する方法を学びたいのですが、必要な機能だけが欲しいので、私。

javascript contextmenu right-click

— 登録ユーザー
ソース

3

つまずきました：davidwalsh.name/html5-context-menu love HTML5

— TD_Nijboer 14

2

これは間違いなく重複ではありません。質問にはサードパーティのライブラリなしで回答が必要であり、もう1つはJqueryを使用する可能性が高いため（ユーザースクリプト内にコンテキストメニューのようなコンテキストGoogleドライブを記述したかった）。

— user2284570 2015年

今日、私はこれについてさらに2つの良い例（私は思う）を見つけました：DEMO 1 // DEMO 2（このデモにはjquery UIが必要です）

— Drako、2017年

2

HTML5コンテキストメニューは一部のバージョンのFirefoxでのみサポートされていることを指摘したいだけです。バージョン61以降のChromeではサポートされていません。

— ダンウィレット

2

Reactを使用している場合- ネイティブメニューは、ネイティブを表示しながら（ブラウザーに応じて異なるスタイルを適用）、既存のすべての機能（コピー、新しいタブで開く、Googleで検索など）を複製します。デモ

— samdd 2018年

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>

スニペットを展開

しかし、あなたは自分自身に尋ねるべきです、本当にデフォルトの右クリック動作を上書きしますか-それはあなたが開発しているアプリケーションに依存します。

JSFIDDLE

— ラデックベンケル
ソース

12

Opera 11.01、Firefox 3.6.13、Chrome 9、Safari 5（addEventListenerを介してすべて4）、IE 8（attachEvent）でテスト済み。

— Radek Benkel、2011

54

右クリックメニューを無効にする方法を説明しました。独自のメニューを作成する方法??

— Shashwat 2012

13

@Shashwatユーザーがクリックした場所がわかっていて、元のメニューがない。その場所にコンテナを作成し、そこにメニューを表示します。

— Radek Benkel 2012

2

正解です。developer.mozilla.org/ en-US / docs / DOM / element.addEventListenerドキュメントも要素です。

— Radek Benkel、2012年

4

@shanehobanコードを調べると、この行が表示されますe.preventDefault();。これが、通常のメニューが表示されない理由です。あなたができることは、右クリック中にキーが押されてから呼び出されないかどうかをチェックするいくつかの条件付きロジックを作成することですe.preventDefault()-その場合、通常のブラウザメニューが表示されます。

— Radek Benkel、2014年

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接尾辞mouseY(event)をmouseX(event)付けpxて、期待どおりに機能させる：http : //jsfiddle.net/a6w7n64o/ 。

— zanetu

3

id ofの要素を参照していますが、id of testの要素はありませんtest。クラスがの要素のみtest。

— マーシャル公爵

1

@Adelphia-ネイティブではなく、自分で作成していないものはすべてサードパーティです。jQuery余計なもので膨れ上がっているわけではありません。それが何かを遅くするほどではない。これは非常に便利であり、jQueryこの回答で使用されているものは標準JavaScriptコマンドに簡単に変換できます。元の質問のリクエストと100％インラインではない可能性がありますが、95％は間違いなくインラインです。

— マーシャル公爵

6

Firefox 39では、デフォルトのコンテキストメニューがカスタムメニューの上部に表示されます。また、カスタムメニューは表示後すぐに閉じます。

— Matt

1

@マット私はFirefox 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";
}

JavaScriptはちょうどこの例のために、私は個人的にWindows上で永続的なメニューのためにそれを削除しています

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移行を使用して、Google Chromeのようなバージョンを作成しました。 JS Fiddle

このページに上記のjsがあるので、簡単に始めましょう。CSSとレイアウトについて心配することができます。使用するレイアウトは、要素またはフォントの素晴らしいアイコン（）と、キーボードショートカットを表示するa を<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を表示します。Google 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トランジションを追加してフェードインおよびフェードアウトするだけです。

コードスニペットを表示

var i = document.getElementById("menu").style;
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    var posX = e.clientX;
    var posY = e.clientY;
    menu(posX, posY);
    e.preventDefault();
  }, false);
  document.addEventListener('click', function(e) {
    i.opacity = "0";
    setTimeout(function() {
      i.visibility = "hidden";
    }, 501);
  }, false);
} else {
  document.attachEvent('oncontextmenu', function(e) {
    var posX = e.clientX;
    var posY = e.clientY;
    menu(posX, posY);
    e.preventDefault();
  });
  document.attachEvent('onclick', function(e) {
    i.opacity = "0";
    setTimeout(function() {
      i.visibility = "hidden";
    }, 501);
  });
}

function menu(x, y) {
  i.top = y + "px";
  i.left = x + "px";
  i.visibility = "visible";
  i.opacity = "1";
}

body {
  background: white;
  font-family: sans-serif;
  color: #5e5e5e;
}

#menu {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  background: #fff;
  color: #555;
  font-family: sans-serif;
  font-size: 11px;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
  -moz-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
  box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
  padding: 0px;
  border: 1px solid #C6C6C6;
}

#menu a {
  display: block;
  color: #555;
  text-decoration: none;
  padding: 6px 8px 6px 30px;
  width: 250px;
  position: relative;
}

#menu a img,
#menu a i.fa {
  height: 20px;
  font-size: 17px;
  width: 20px;
  position: absolute;
  left: 5px;
  top: 2px;
}

#menu a span {
  color: #BCB1B3;
  float: right;
}

#menu a:hover {
  color: #fff;
  background: #3879D9;
}

#menu hr {
  border: 1px solid #EBEBEB;
  border-bottom: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<h2>CSS3 and JAVASCRIPT custom menu.</h2>
<em>Stephan Stanisic | Lisence free</em>
<p>Right-click anywhere on this page to open the custom menu. Styled like the Google Chrome contextmenu. And yes, you can use <i class="fa fa-flag"></i>font-awesome</p>
<p style="font-size: small">
  <b>Lisence</b>
  <br /> "THE PIZZA-WARE LICENSE" (Revision 42):
  <br /> You can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a Pizza in return.
  <br />
  <a style="font-size:xx-small" href="https://github.com/KLVN/UrbanDictionary_API#license">https://github.com/KLVN/UrbanDictionary_API#license</a>
</p>
<br />
<br />
<small>(The white body background is just because I hate the light blue editor background on the result on jsfiddle)</small>
<div id="menu">
  <a href="#">
    <img src="http://puu.sh/nr60s/42df867bf3.png" /> AdBlock Plus <span>Ctrl + ?!</span>
  </a>
  <a href="#">
    <img src="http://puu.sh/nr5Z6/4360098fc1.png" /> SNTX <span>Ctrl + ?!</span>
  </a>
  <hr />
  <a href="#">
    <i class="fa fa-fort-awesome"></i> Fort Awesome <span>Ctrl + ?!</span>
  </a>
  <a href="#">
    <i class="fa fa-flag"></i> Font Awesome <span>Ctrl + ?!</span>
  </a>
</div>

スニペットを展開

— ステファン・スタニシック
ソース

これは私に大きな頭痛を救いました！OPがdivだけでなくWebページ全体で使用する簡単な方法を探していた場合、これは受け入れられるべき答えです。–

— Woody

12

次のコードをbodyタグに追加するだけで、コンテキストメニューをブロックすることができます。

<body oncontextmenu="return false;">

これにより、コンテキストメニューへのすべてのアクセスがブロックされます（マウスの右ボタンからだけでなく、キーボードからも）。

PSあなたはあなたがコンテキストメニューを無効にしたい任意のタグにこれを追加することができます

例えば：

<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でテストおよび動作します。動作するサンプルは、javascriptの右クリックメニューで確認できます。

— LabLogic
ソース

機能しますが、ページのデモメニューは本当に小さくて窮屈です。しかし、良い例です。

— David Millar 2013

2

3ボタンマウスを使用している場合に機能します。Ctrlキーを押しながらクリックすると、ユーザーが高く乾燥します。@Singlesは、想像力に少し影響を与えても、より良い提案をします。

— AJFarkas 2014年

7

私は、これはすでに回答されているけど、私は消えるためにネイティブコンテキストメニューを取得するために、第2の答えをいくつかの時間のレスリングを過ごしたし、ユーザーがクリックした場所、それが現れています。
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;
}

JavaScript

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";
});

CodePenの例

— クリステン・ニールセン
ソース

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
ソース

コードはすばらしいですが、OPsの問題が実際に何であるか、およびこれがそれをどのように解決するかについての説明を含めてください。

— Rory McCrossan 2015

私はこの解決策が好きですが、Firefox 39ではメニューは表示された直後に自動的に閉じます。

— Matt

このソリューションは、ページに強制的にスクロールさせ（一連の<br>タグを追加するとします）、ページの下部にある場合、実際には機能しません。

— DanielM 2015

これを機能させるには、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>

スニペットを展開

— ヨルダン・ゲオルギエフ
ソース

これは私が期待していた答えよりも多く、右クリックメニューを実際に変更する例です

— Jesse Reza Khorasanee

うん、似た例は次のようになります。codepen.io/yordangeorgiev/pen/GzWJzdと最終製品：qto.fi/qto/view/concepts_doc（ただ...ログインをクリックしてください）

— Yordan Georgievの

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
ソース

短い要約は、レビュー担当者（私のような）があなたの回答の有効性を判断するのに役立ち、一部の読者はそのリンクをたどる必要がなくなります。ほんの1、2文で十分で、作業量は多くありません。

— Ingo Karkat 16年

@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 2013年

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;
        }

— raphpell
ソース

1

コンテキストメニューが表示されたときに、そのジュートは警告を表示しませんか？どのようにカスタマイズするのかわかりません。

— スティーブンオスターミラー2014年

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;">

私がここでやっていること

独自のカスタムdivメニューを作成し、位置を設定します：絶対値と表示：なし。
oncontextmenuイベントをクリックするページまたは要素に追加します。
falseを返し、デフォルトのブラウザアクションをキャンセルします。
ユーザー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; 場合

— フェデゲ
ソース