Bagaimana cara menambahkan menu klik kanan khusus ke halaman web?

291

Saya ingin menambahkan menu klik kanan khusus ke aplikasi web saya. Apakah ini dapat dilakukan tanpa menggunakan perpustakaan yang dibangun sebelumnya? Jika demikian, bagaimana cara menampilkan menu klik kanan kustom sederhana yang tidak menggunakan perpustakaan JavaScript pihak ke-3?

Saya bertujuan untuk sesuatu seperti yang dilakukan Google Documents. Ini memungkinkan pengguna mengklik kanan dan menunjukkan kepada pengguna menu mereka sendiri.

CATATAN: Saya ingin belajar bagaimana membuat sendiri versus menggunakan sesuatu yang sudah dibuat seseorang sejak sebagian besar waktu, perpustakaan pihak ke-3 itu penuh dengan fitur sedangkan saya hanya ingin fitur yang saya butuhkan jadi saya ingin itu sepenuhnya dibuat oleh tangan saya.

javascript contextmenu right-click Pengguna Terdaftar
sumber
3
baru saja menemukan: davidwalsh.name/html5-context-menu love HTML5
TD_Nijboer
2
Ini jelas bukan duplikat. Karena pertanyaan memerlukan jawaban tanpa pustaka pihak ke-3, dan yang lainnya kemungkinan menggunakan Jquery (saya ingin menulis konteks drive Google seperti menu konteks di dalam userscript) .
user2284570
baru hari ini saya menemukan dua contoh yang lebih baik (saya pikir) tentang ini: DEMO 1 // DEMO 2 (demo ini perlu UI jquery ) Saya harap membantu siapa pun, bb.
Drako
2
Hanya ingin menunjukkan bahwa menu konteks HTML5 hanya didukung di beberapa versi Firefox dan sejauh yang saya tahu tidak ada yang mendukungnya. Chrome pada Versi 61 tidak mendukungnya.
Dan Willett
2
Untuk orang yang menggunakan Bereaksi - menu asli mereplikasi semua fungsi yang ada (salin, buka di tab baru, cari di google dll.) Sementara mencari asli (berlaku gaya yang berbeda tergantung pada browser). demo
samdd

Jawaban:

247

Menjawab pertanyaan Anda - gunakan contextmenuacara, seperti di bawah ini:

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>
Luaskan cuplikan

Tetapi Anda harus bertanya pada diri sendiri, apakah Anda benar-benar ingin menimpa perilaku klik kanan default - itu tergantung pada aplikasi yang Anda kembangkan.

JSFIDDLE

Radek Benkel
sumber
12
Diuji pada Opera 11.01, Firefox 3.6.13, Chrome 9, Safari 5 (semua 4 melalui addEventListener) dan IE 8 (attachEvent).
Radek Benkel
54
Anda baru saja menjelaskan cara menonaktifkan menu klik kanan. Bagaimana cara membuat menu sendiri ??
Shashwat
13
@ Shashwat Anda tahu tempat, di mana pengguna telah mengklik, dan Anda tidak memiliki menu asli. Buat wadah di tempat itu dan tampilkan menu Anda di sana.
Radek Benkel
2
Itu benar: developer.mozilla.org/en-US/docs/DOM/element.addEventListener Document juga merupakan elemen.
Radek Benkel
4
@ Shanehoban Ketika Anda melihat kode, Anda akan melihat baris ini e.preventDefault();. Inilah sebabnya mengapa menu reguler tidak ditampilkan. Yang dapat Anda lakukan adalah membuat beberapa logika kondisional yang memeriksa, jika tombol ditekan saat mengklik kanan dan kemudian TIDAK menelepon e.preventDefault()- Anda akan mendapatkan menu browser biasa.
Radek Benkel
54

Sangat bermanfaat bagi saya. Demi orang-orang seperti saya, mengharapkan gambar menu, saya taruh di sini kode yang saya gunakan untuk membuat menu klik kanan:

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

Mohamed Iqzas
sumber
7
@Schism Suffixed mouseY(event)dan mouseX(event)dengan pxmembuatnya berfungsi seperti yang diharapkan: http://jsfiddle.net/a6w7n64o/ .
zanetu
3
Anda mereferensikan suatu elemen dengan id testtetapi tidak ada elemen oleh id test. Hanya elemen dengan kelas test.
The Duke Of Marshall שלום
1
@Adelphia - Apa pun yang bukan asli dan tidak Anda buat sendiri adalah pihak ketiga. jQuerysebenarnya tidak terlalu menggembung dengan hal-hal tambahan. Tidak pada tingkat yang akan memperlambat apa pun. Ini sangat berguna dan sama jQuerydigunakan dalam jawaban ini dapat dengan mudah dikonversi ke JavaScriptperintah standar . Mungkin tidak 100% sejajar dengan permintaan dalam pertanyaan asli, tapi itu pasti 95% sejajar dengannya
The Duke Of Marshall םלום
6
Di firefox 39 menu konteks default masih muncul di atas menu kustom. Menu kustom juga langsung ditolak setelah ditampilkan.
Matt
1
@ Mat Saya punya masalah yang sama dengan Firefox 58. Posting ini menjelaskan solusi, yang berfungsi untuk saya: stackoverflow.com/a/40545465/2922675 Anda menonaktifkan propagasi acara untuk dokumen dan mendaftarkan konteks-menu-handler pada objek jendela . Ini biola yang disesuaikan: jsfiddle.net/jjgkLe3g/1
Nils-o-mat
27

Kombinasi beberapa CSS yang bagus dan beberapa tag html non-standar tanpa pustaka eksternal dapat memberikan hasil yang bagus (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>

Catatan: tag menu tidak ada, saya mengada-ada (Anda bisa menggunakan apa saja)

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

The JavaScript hanya untuk contoh ini, saya pribadi keluarkan untuk menu persisten pada 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);

Juga perhatikan, Anda berpotensi dapat memodifikasi menu > menu{left:100%;}untuk menu > menu{right:100%;}untuk menu yang mengembang dari kanan ke kiri. Anda perlu menambahkan margin atau sesuatu di suatu tempat

Ishak
sumber
20

Menurut jawaban di sini dan di arus lain, saya telah membuat versi yang mirip dengan Google Chrome, dengan transisi css3. JS Fiddle

Mari kita mulai dengan mudah, karena kita memiliki js di atas pada halaman ini, kita dapat khawatir tentang css dan tata letak. Tata letak yang akan kita gunakan adalah <a>elemen dengan <img>elemen atau ikon font yang mengagumkan ( <i class="fa fa-flag"></i>) dan a <span>untuk menampilkan pintasan keyboard. Jadi inilah strukturnya:

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

Kami akan meletakkan ini di div dan menunjukkan div itu di klik kanan. Mari kita gaya mereka seperti di Google Chrome, oke?

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

Sekarang kita akan menambahkan kode dari jawaban yang diterima, dan mendapatkan nilai X dan Y dari kursor. Untuk melakukan ini, kami akan menggunakan e.clientXdan e.clientY. Kami menggunakan klien, sehingga div menu harus diperbaiki.

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

Dan itu dia! Cukup tambahkan transisi css ke dalam dan ke luar, dan selesai!

Tampilkan cuplikan kode

Stephan Stanisic
sumber
Ini menyelamatkan saya dari sakit kepala hebat! Jika OP sedang mencari cara sederhana untuk digunakan pada seluruh halaman web dan bukan hanya div, ini harus diterima jawaban :)
Woody
12

Anda bisa mencoba memblokir menu konteks dengan menambahkan yang berikut ke tag tubuh Anda:

<body oncontextmenu="return false;">

Ini akan memblokir semua akses ke menu konteks (tidak hanya dari tombol mouse kanan tetapi juga dari keyboard).

PS Anda dapat menambahkan ini ke tag apa pun yang Anda inginkan untuk menonaktifkan menu konteks

sebagai contoh:

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

Akan menonaktifkan menu konteks di div tertentu saja

by0
sumber
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>

Diuji dan berfungsi di Opera 11.6, firefox 9.01, Internet Explorer 9 dan chrome 17 Anda dapat memeriksa sampel yang berfungsi di menu klik kanan javascript

LabLogic
sumber
Ini berfungsi, tetapi menu demo di halaman Anda sangat kecil dan sempit. Contoh yang bagus.
David Millar
2
Ini berfungsi jika Anda menggunakan mouse tiga tombol. Ctrl-klik membuat pengguna tinggi dan kering. @Singles memiliki saran yang lebih baik, bahkan jika itu meninggalkan sedikit imajinasi.
AJFarkas
7

Saya tahu ini sudah dijawab, tetapi saya menghabiskan waktu bergulat dengan jawaban kedua untuk menghilangkan menu konteks asli dan menampilkannya di tempat pengguna mengklik.
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";
});

Contoh CodePen

Kristen Nielsen
sumber
6

Coba ini

$(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
sumber
Kode bagus, tapi tolong sertakan beberapa deskripsi tentang apa sebenarnya masalah OP, dan bagaimana ini menyelesaikannya.
Rory McCrossan
Saya suka solusi ini, namun di firefox 39 menu menolak sendiri setelah muncul.
Matt
Solusi ini tidak benar-benar berfungsi jika Anda memaksa halaman untuk memiliki gulir (misalnya Anda menambahkan banyak tag <br>) dan berada di suatu tempat di bagian bawahnya.
DanielM
Anda harus menggunakan clientX dan clientY alih-alih pageX dan pageY agar ini berfungsi; lihat jawaban yang bagus ini: stackoverflow.com/questions/9262741/…
DanielM
Ya, DanielM ada masalah dengan menu klik kanan saat menggulir sehingga ini diatasi dengan menggunakan clientX dan clientY bukannya pageX dan pageY, saya membuat perubahan pada kode. Terima kasih atas bantuan ...
AkshayBandivadekar
5

JS murni dan solusi css untuk menu konteks klik kanan benar-benar dinamis, meskipun berdasarkan konvensi penamaan standar untuk unsur-unsur id, link dll jsfiddle dan kode Anda bisa copy paste ke halaman statis html tunggal:

<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>
Luaskan cuplikan

Yordan Georgiev
sumber
Ini lebih merupakan jawaban yang saya harapkan, sebuah contoh yang benar-benar mengubah menu klik kanan
Jesse Reza Khorasanee
yup, contoh serupa dapat berupa: codepen.io/yordangeorgiev/pen/GzWJzd dan produk akhir: qto.fi/qto/view/concepts_doc (cukup klik pada login ...)
Yordan Georgiev
3

Berikut ini adalah tutorial yang sangat bagus tentang bagaimana membangun menu konteks kustom dengan contoh kode kerja penuh (tanpa JQuery dan perpustakaan lain).

Anda juga dapat menemukan kode demo mereka di GitHub .

Mereka memberikan penjelasan langkah demi langkah terperinci yang dapat Anda ikuti untuk membangun menu konteks klik kanan Anda sendiri (termasuk kode html, css dan javascript) dan merangkumnya di akhir dengan memberikan contoh kode lengkap.

Anda dapat mengikuti dengan mudah dan menyesuaikannya dengan kebutuhan Anda sendiri. Dan tidak perlu untuk JQuery atau perpustakaan lain.

Ini adalah contoh kode menu contohnya:

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

Contoh kerja (daftar tugas) dapat ditemukan di codepen .

ForceOfWill
sumber
Ringkasan singkat akan membantu pengulas (seperti saya) untuk menilai validitas jawaban Anda, dan dapat menyelamatkan beberapa pembaca dari mengikuti tautan itu. Hanya satu atau dua kalimat akan baik-baik saja dan tidak terlalu banyak bekerja.
Ingo Karkat
@IngoKarkat Terima kasih atas saran Anda. Saya menambahkan beberapa penjelasan. Semoga Anda menemukan ini bermanfaat. Itu banyak membantu saya.
ForceOfWill
2

Anda dapat melakukannya dengan kode ini. kunjungi di sini untuk tutorial lengkap dengan deteksi tepi otomatis 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();
 });
 });

`

Anand Roshan
sumber
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>
Graham Allen
sumber
2
Anda tahu ada oncontextmenuacara yang dipecat (biasanya di klik kanan)
megawac
1

Cara sederhana yang bisa Anda lakukan adalah menggunakan onContextMenu untuk mengembalikan fungsi JavaScript:

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

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

Dan dengan memasukkan return false;Anda akan membatalkan menu konteks.

jika Anda masih ingin menampilkan menu konteks, Anda cukup menghapus return false;baris.

EpicNinjaCheese
sumber
1

Diuji dan berfungsi di Opera 12.17, firefox 30, Internet Explorer 9 dan chrome 26.0.1410.64 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
raphpell
sumber
1
Tidakkah itu akan menonjol ketika menu konteks muncul? Saya tidak melihat bagaimana itu akan menyesuaikannya.
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;">

Apa yang saya lakukan di sini

  1. Buat menu div kustom Anda sendiri dan atur posisi: absolute dan display: tidak ada dalam kasus.
  2. Tambahkan ke halaman atau elemen untuk diklik acara oncontextmenu.
  3. Batalkan tindakan browser default dengan return false.

  4. Pengguna js untuk memohon tindakan Anda sendiri.

Chris Enitan
sumber
0

Anda harus ingat jika Anda ingin menggunakan solusi Firefox saja, jika Anda ingin menambahkannya ke seluruh dokumen Anda harus menambahkan contextmenu="mymenu"ke <html>tag bukan ke bodytag.
Anda harus memperhatikan hal ini.

Wowwwo
sumber
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>

Anda dapat mengubah dan memodifikasi kode ini untuk membuat menu konteks yang tampak lebih baik dan lebih efisien. Sedangkan untuk memodifikasi menu konteks yang ada, saya tidak yakin bagaimana melakukan itu ... Lihat biola ini untuk sudut pandang yang terorganisir. Juga, coba klik item dalam menu konteks saya. Mereka seharusnya memberi tahu Anda beberapa pesan yang luar biasa. Jika tidak berhasil, coba sesuatu yang lebih ... kompleks.

Cannicide
sumber
0

Saya menggunakan sesuatu yang mirip dengan jsfiddle berikut

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

jika Anda menargetkan browser IE yang lebih lama, Anda tetap harus melengkapinya dengan 'attachEvent; kasus

fedeghe
sumber