Bir web sayfasına özel sağ tıklama menüsü nasıl eklenir?

291

Web uygulamama özel bir sağ tıklama menüsü eklemek istiyorum. Bu önceden oluşturulmuş kitaplıklar kullanılmadan yapılabilir mi? Öyleyse, 3. taraf JavaScript kitaplığı kullanmayan basit bir özel sağ tıklama menüsü nasıl görüntülenir?

Google Dokümanlar'ın yaptığı gibi bir şey hedefliyorum. Kullanıcıların sağ tıklayıp kullanıcılara kendi menülerini göstermelerini sağlar.

NOT: Zaten çoğu zamandan beri yapılmış bir şeyi kullanarak kendime karşı nasıl yapacağımı öğrenmek istiyorum, bu 3. taraf kütüphaneler özelliklerle şişirilirken, sadece ihtiyacım olan özellikleri istiyorum, bu yüzden tamamen el yapımı olmasını istiyorum ben mi.

javascript  contextmenu  right-click 
— kayıtlı kullanıcı
kaynak
3
sadece tökezledi: davidwalsh.name/html5-context-menu aşk HTML5
— TD_Nijboer
2
Bu kesinlikle bir kopya değil. Soru, üçüncü taraf kitaplıkları olmadan cevap gerektirdiğinden ve diğeri Jquery kullanması muhtemeldir (Google'ın sürücüsünü bağlam menüsü gibi bir bağlam metni yazmak istedim) .
— user2284570
sadece bugün bunun hakkında iki iyi örnek (sanırım) buldum: DEMO 1 // DEMO 2 (bu demo jquery UI gerekir ) Umarım herkese yardım ederim, bb.
— Drako
2
HTML5 içerik menüsünün yalnızca Firefox'un bazı sürümlerinde desteklendiğini ve başka hiçbir şeyin desteklemediğini söyleyebildiğimizi belirtmek isterim. Sürüm 61'ten itibaren Chrome bunu desteklemiyor.
— Dan Willett
2
Tepki kullanan kişiler için - yerli-menü çoğaltır tüm mevcut işlevselliği (yeni sekmede açık kopya, vb google araması) yerel görünümlü iken (tarayıcıya bağlı olarak farklı stilleri geçerlidir). demo
— samdd

Yanıtlar:

247

Sorunuzu cevaplama - contextmenuaşağıdaki gibi etkinlik kullanın :

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>
Snippet'i genişlet

Ancak kendinize sormalısınız, gerçekten varsayılan sağ tıklama davranışının üzerine yazmak istiyor musunuz - bu, geliştirdiğiniz uygulamaya bağlıdır.

JSFIDDLE

— Radek Benkel
kaynak
12
Opera 11.01, Firefox 3.6.13, Chrome 9, Safari 5'de (tümü addEventListener aracılığıyla 4) ve IE 8'de (attachEvent) test edilmiştir.
— Radek Benkel
54
Az önce sağ tıklama menüsünün nasıl devre dışı bırakılacağını açıkladınız. Kendi menümüz nasıl oluşturulur?
— Shashwat
13
@ Shashwat Kullanıcının tıkladığı yeri biliyorsunuz ve orijinal menünüz yok. O yerde bir kap oluşturun ve menünüzü orada görüntüleyin.
— Radek Benkel
2
— Radek Benkel
4
@shanehoban Koda baktığınızda bu satırı göreceksiniz e.preventDefault();. Bu yüzden normal menü gösterilmez. Yapabileceğiniz şey, sağ tıklama sırasında tuşuna basıldığında ve sonra ÇAĞRI DEĞİLSE, kontrol edilen bazı koşullu mantık oluşturmaktır e.preventDefault()- o zaman düzenli tarayıcı menüsü alırsınız.
— Radek Benkel
54

Benim için çok faydalı oldu. Benim gibi insanlar uğruna, menü çizimini beklerken, sağ tıklama menüsünü yapmak için kullandığım kodu buraya koydum:

$(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>
Snippet'i genişlet

— Mohamed Iqzas
kaynak
7
@Schism suffixed mouseY(event)ve mouseX(event)birlikte pxolmak için o kadar beklenir çalışır: http://jsfiddle.net/a6w7n64o/ .
— Zanetu
3
Kimliğine göre bir öğeye atıfta bulunuyorsunuz, testancak kimliğine göre bir öğe yok test. Sadece sınıfına sahip elemanlar test.
— Marshall Dükü
1
@Adelphia - Yerli olmayan ve sizin tarafınızdan oluşturulmayan hiçbir şey üçüncü taraftır. jQuerygerçekten ekstra şeyler ile şişirilmiş değil. Hiçbir şeyi yavaşlatacak derecede değil. Bu çok kullanışlı ve jQuerybu cevapta kullanılan aynı standart JavaScriptkomutlara kolayca dönüştürülebilir . Orijinal sorudaki taleple% 100 satır içi olmayabilir, ancak kesinlikle% 95 satır içi olacaktır.
— Marshall Dükü
6
Firefox 39'da varsayılan içerik menüsü hala özel menünün üst kısmında görünür. Ayrıca özel menü görüntülendikten hemen sonra kapanır.
— Matt
1
@Matt Firefox 58 ile aynı sorunu yaşadım. Bu yazı benim için çalışan bir çözüm açıklıyor: stackoverflow.com/a/40545465/2922675 Belge için olay yayılımını devre dışı bırakıyorsunuz ve bağlam-menü işleyicinizi pencere nesnesine kaydediyorsunuz . İşte ayarlanmış bir keman: jsfiddle.net/jjgkLe3g/1
— Nils-o-mat
27

Bazı güzel CSS ve bazı harici kütüphaneler olmayan standart olmayan html etiketlerinin bir kombinasyonu hoş bir sonuç verebilir (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>

Not: menü etiketi mevcut değil, uyduruyorum (herhangi bir şey kullanabilirsiniz)

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 sadece bu örneğin, ben şahsen pencerelerde kalıcı menüler için bunu kaldırın

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

Ayrıca potansiyel olarak değiştirebilir, dikkat menu > menu{left:100%;}etmek menu > menu{right:100%;}sağdan genişlediğinde sola bir menü için. Yine de bir yere bir kenar boşluğu veya başka bir şey eklemeniz gerekir

— Isaac
kaynak
20

Buradaki ve diğer 'akışlardaki yanıtlara göre, Google Chrome'unkine benzeyen, css3 geçişli bir sürüm yaptım. JS Fiddle

Bu sayfada yukarıdaki j'lere sahip olduğumuzdan, css ve düzen hakkında endişelenebileceğimiz için, başlayalım. Kullanacağımız düzen , klavye kısayollarını göstermek için <a>bir <img>öğeye veya harika bir font simgesine ( <i class="fa fa-flag"></i>) ve a'ya sahip bir öğedir <span>. Yani bu yapı:

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

Bunları bir div'e koyacağız ve div'ı sağ tıklamayla göstereceğiz. Onları Google Chrome'daki gibi şekillendirelim, olur mu?

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

Şimdi kodu kabul edilen cevaptan ekleyeceğiz ve imlecin X ve Y değerini alacağız. Bunu yapmak için e.clientXve kullanacağız e.clientY. İstemci kullanıyoruz, bu yüzden menü div'in düzeltilmesi gerekiyor.

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

Ve işte bu! Sadece solmaya ve solmaya css geçişlerini ekleyin ve bitti!

Kod snippet'ini göster

— Stephan Stanisic
kaynak
Bu bana büyük bir baş ağrısı kurtardı! OP sadece bir div değil tüm web sayfasında kullanmak için basit bir yol arıyorduysa, bu cevap kabul edilmelidir :)
— Woody
12

Gövde etiketinize aşağıdakileri ekleyerek bağlam menüsünü engellemeyi deneyebilirsiniz:

<body oncontextmenu="return false;">

Bu, bağlam menüsüne tüm erişimi engelleyecektir (sadece sağ fare düğmesinden değil, aynı zamanda klavyeden de).

Not: Bunu, içerik menüsünü devre dışı bırakmak istediğiniz herhangi bir etikete ekleyebilirsiniz.

Örneğin:

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

İçerik menüsünü yalnızca ilgili div'de devre dışı bırakır

— by0
kaynak
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 ve chrome 17'de test edildi ve çalışıyor javascript sağ tıklama menüsünde çalışan bir örneğe göz atabilirsiniz.

— LabLogic
kaynak
Çalışır, ancak sayfanızdaki demo menüsü gerçekten küçük ve sıkışıktır. Yine de iyi bir örnek.
— David Millar
2
Üç düğmeli bir fare kullanıyorsanız çalışır. Ctrl-click kullanıcıyı yüksek ve kuru bırakır. @Singles, hayal gücüne biraz bıraksa bile daha iyi bir öneriye sahiptir.
— AJFarkas
7

Bunun zaten yanıtlandığını biliyorum, ancak yerel bağlam menüsünün kaybolması ve kullanıcının tıkladığı yeri göstermesi için ikinci cevapla güreştim.
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 Örneği

— Kristen Nielsen
kaynak
6

Bunu dene

$(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
kaynak
Kod harika, ancak lütfen OP'nin sorununun gerçekte ne olduğu ve bunun nasıl çözdüğü hakkında bir açıklama ekleyin.
— Rory McCrossan
Bu çözümü seviyorum, ancak firefox 39'da menü geldikten hemen sonra kendi kendine kapanıyor.
— Matt
Sayfayı kaydırma yapmaya zorlarsanız (bir grup <br> etiketi eklediğinizi varsayalım) ve bunun alt kısmında bir yerdeyseniz bu çözüm aslında çalışmaz.
— DanielM
Bunun çalışması için pageX ve pageY yerine clientX ve clientY kullanmalısınız; bu harika yanıtı kontrol edin: stackoverflow.com/questions/9262741/…
— DanielM
Evet, DanielM kaydırma sırasında sağ tıklama menüsü ile ilgili bir sorun var, bu yüzden bu üstesinden pageX ve pageY yerine clientX ve clientY kullanarak, kodda değişiklikler yaptım. Yardım için teşekkürler ...
— AkshayBandivadekar
5

Gerçekten dinamik sağ tık menüsü için Saf JS ve css çözümü de olsa elemanları id, bağlantılar vb için önceden tanımlanmış adlandırma kurallarına dayalı jsfiddle ve tek bir statik html sayfası yapıştırın kopyalayabilirsiniz kodu:

<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>
Snippet'i genişlet

— Yordan Georgiev
kaynak
Bu beklediğim cevap, aslında sağ tıklama menüsünü değiştiren bir örnek
— Jesse Reza Khorasanee
yup, benzer bir örnek olabilir: codepen.io/yordangeorgiev/pen/GzWJzd ve nihai ürün: qto.fi/qto/view/concepts_doc (sadece girişe tıklayın ...)
— Yordan Georgiev
3

Özel bağlam menüsünün nasıl oluşturulacağı hakkında çok iyi bir öğretici tam bir çalışma kodu örneği (JQuery ve diğer kütüphaneler olmadan) ile .

Demo kodlarını GitHub'da da bulabilirsiniz .

Kendi sağ tıklama içerik menünüzü (html, css ve javascript kodu dahil) oluşturmak için takip edebileceğiniz ayrıntılı bir adım adım açıklama sunar ve sonunda örnek kodun tamamını vererek özetleyebilirsiniz.

Kolayca takip edebilir ve kendi ihtiyaçlarınıza göre uyarlayabilirsiniz. Ve JQuery veya diğer kütüphanelere gerek yoktur.

Örnek menü kodları şöyle görünür:

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

Kod alanında çalışma örneği (görev listesi) bulunabilir .

— ForceOfWill
kaynak
Kısa bir özet, gözden geçirenlerin (benim gibi) cevabınızın geçerliliğini değerlendirmesine yardımcı olur ve bazı okuyucuları bu bağlantıyı izlemekten kurtarabilir. Sadece bir ya da iki cümle iyi olur ve çok fazla işe yaramaz.
— Ingo Karkat
@IngoKarkat Tavsiyeniz için teşekkürler. Biraz açıklama ekledim. Umarım bunu faydalı bulursun. Bana çok yardımcı oldu.
— ForceOfWill,
2

Bunu bu kodla yapabilirsiniz. otomatik kenar algılamalı tam eğitici için burayı ziyaret edin 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
kaynak
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
kaynak
2
oncontextmenu
— İşten
1

Bunu yapmanın basit bir yolu, bir JavaScript işlevi döndürmek için onContextMenu kullanmaktır:

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

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

Ve girerek return false;içerik menüsünü iptal edeceksiniz.

hala içerik menüsünü görüntülemek istiyorsanız, return false;satırı kaldırabilirsiniz .

— EpicNinjaCheese
kaynak
1

Opera 12.17, firefox 30, Internet Explorer 9 ve krom 26.0.1410.64'te test edildi ve çalışıyor 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
— raphpell
kaynak
1
Bağlam menüsü göründüğünde bu çıkıntı bir uyarı göstermez mi? Nasıl özelleştireceğini anlamıyorum.
— 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;">

Burada ne yapıyorum

  1. Kendi özel div menünüzü yaratın ve konumu ayarlayın: mutlak ve ekran: hiçbir durumda.
  2. Oncontextmenu olayına tıklanacak sayfaya veya öğeye ekleyin.
  3. Varsayılan tarayıcı eylemini return false ile iptal edin.

  4. Kendi eylemlerinizi çağırmak için kullanıcı js.

— Chris Enitan
kaynak
0

Yalnızca Firefox çözümünü kullanmak isteyip istemediğinizi, bunu belgenin tamamına eklemek istiyorsanız contextmenu="mymenu", <html>etikete değil etikete eklemeniz gerektiğini hatırlamanız gerekir body.
Buna dikkat etmelisin.

— WowOWwoW
kaynak
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>

Daha iyi görünümlü, daha etkili bir bağlam menüsü oluşturmak için bu kodu değiştirebilir ve değiştirebilirsiniz. Mevcut bir bağlam menüsünü değiştirmeye gelince, bunun nasıl yapılacağından emin değilim ... Organize bir bakış açısı için bu kemanı inceleyin . Ayrıca, bağlam menümdeki öğeleri tıklamayı deneyin. Size birkaç harika mesaj uyarmalıdırlar. Eğer işe yaramazlarsa, daha karmaşık bir şey deneyin.

— Cannicide
kaynak
0

Aşağıdaki jsfiddle benzer bir şey kullanın

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

eski IE tarayıcıları hedefliyorsanız, zaten 'attachEvent; durum

— fedeghe
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.