वेब पेज पर कस्टम राइट-क्लिक मेनू कैसे जोड़ें?

291

मैं अपने वेब एप्लिकेशन में एक कस्टम राइट-क्लिक मेनू जोड़ना चाहता हूं। क्या यह किसी भी पूर्व-निर्मित पुस्तकालयों का उपयोग किए बिना किया जा सकता है? यदि ऐसा है, तो एक साधारण कस्टम राइट-क्लिक मेनू कैसे प्रदर्शित किया जाए जो 3 जी पार्टी जावास्क्रिप्ट लाइब्रेरी का उपयोग नहीं करता है?

मैं कुछ के लिए लक्ष्य कर रहा हूं जैसे कि Google डॉक्स क्या करता है। यह उपयोगकर्ताओं को राइट-क्लिक करता है और उपयोगकर्ताओं को अपना मेनू दिखाता है।

नोट: मैं सीखना चाहता हूं कि कैसे अपना खुद का बनाम बनाने के लिए किसी का उपयोग करके किसी को पहले से ही बना हुआ है, उन 3 पार्टी पुस्तकालयों को सुविधाओं के साथ फूला हुआ है, जबकि मैं केवल उन सुविधाओं को चाहता हूं जो मुझे चाहिए, इसलिए मैं चाहता हूं कि यह पूरी तरह से हाथ से बनाया जाए। मुझे।

javascript  contextmenu  right-click 
— पंजीकृत उपयोगकर्ता
स्रोत
3
बस पर ठोकर खाई: davidwalsh.name/html5-context-menu HTML5 प्यार करता हूँ
— TD_Nijboer
2
यह निश्चित रूप से एक डुप्लिकेट नहीं है। जैसा कि प्रश्न को तीसरे पक्ष के पुस्तकालयों के बिना जवाब की आवश्यकता होती है, और दूसरे को जेक्वेरी का उपयोग करने की संभावना है (मैं एक संदर्भ Google को एक संदर्भ के अंदर संदर्भ मेनू जैसी ड्राइव लिखना चाहता था) ।
— user2284570
आज ही मुझे इसके बारे में दो और अच्छे उदाहरण मिले (मुझे लगता है): DEMO 1 // DEMO 2 (इस डेमो को jquery UI की आवश्यकता है ) मुझे आशा है कि किसी को भी, bb की मदद मिलेगी।
— ड्रेको
2
बस यह बताना चाहता हूं कि HTML5 संदर्भ मेनू केवल फ़ायरफ़ॉक्स के कुछ संस्करणों में समर्थित है और जहां तक ​​मैं बता सकता हूं कि इसके अलावा कुछ और समर्थन नहीं करता है। संस्करण 61 के रूप में क्रोम इसका समर्थन नहीं करता है।
— दान विलेट २
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>
स्निपेट का विस्तार करें

लेकिन आपको खुद से पूछना चाहिए, क्या आप वास्तव में डिफ़ॉल्ट राइट-क्लिक व्यवहार को अधिलेखित करना चाहते हैं - यह उस एप्लिकेशन पर निर्भर करता है जो आप विकसित कर रहे हैं।

JSFIDDLE

— राडेक बेन्केल
स्रोत
12
ओपेरा 11.01, फ़ायरफ़ॉक्स 3.6.13, क्रोम 9, सफ़ारी 5 (addEventListener के माध्यम से सभी 4) और IE 8 (संलग्नक) पर परीक्षण किया गया।
— राडेक बेंकेल
54
आपने अभी बताया है कि राइट-क्लिक मेनू को कैसे निष्क्रिय करना है। अपना खुद का मेनू कैसे बनाये ??
— शाश्वत
13
@ शशवत आपको वह स्थान पता है, जहाँ उपयोगकर्ता ने क्लिक किया है, और आपके पास मूल मेनू नहीं है। उस स्थान पर एक कंटेनर बनाएं और वहां अपना मेनू प्रदर्शित करें।
— राडेक बेंकेल
2
यह सही है: developer.mozilla.org/en-US/docs/DOM/element.addEventListener दस्तावेज़ भी एक तत्व है।
— राडेक बेंचेल
4
@shanehoban जब आप कोड देखेंगे, तो आपको यह लाइन दिखाई देगी e.preventDefault();। यही कारण है कि नियमित मेनू नहीं दिखाया गया है। आप जो कर सकते हैं वह कुछ सशर्त तर्क बनाने के लिए है जो जांचता है, अगर कुंजी को दायां क्लिक करते समय दबाया जाता है और फिर कॉल नहीं किया जाता है e.preventDefault()- तो आपको नियमित ब्राउज़र मेनू मिलेगा।
— राडेक बेंकेल
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
@ स्चिज़ प्रत्यय mouseY(event)और इसके mouseX(event)साथ pxअपेक्षित रूप से काम करने के लिए: http://jsfiddle.net/a6w7n64o/ ।
— ज़ानेतु
3
आप एक तत्व को आईडी के द्वारा संदर्भित कर रहे हैं, testलेकिन आईडी के द्वारा कोई तत्व नहीं है test। के वर्ग के साथ केवल तत्व test।
— द ड्यूक ऑफ़ मार्शल ukeלו
1
@ एडेल्फिया - कोई भी चीज़ जो मूल नहीं है और अपने आप से नहीं बनाई गई है, वह थर्ड पार्टी है। jQueryवास्तव में यह सब अतिरिक्त सामान के साथ फूला हुआ नहीं है। इस हद तक नहीं कि यह कुछ भी धीमा कर दे। यह बहुत उपयोगी है और jQueryइस उत्तर में उपयोग किए जाने वाले समान को आसानी से मानक JavaScriptकमांड में परिवर्तित किया जा सकता है। यह मूल प्रश्न में अनुरोध के साथ 100% इनलाइन नहीं हो सकता है, लेकिन यह निश्चित रूप से इसके साथ 95% इनलाइन है।
— द ड्यूक ऑफ मार्शल ukeלו
6
फ़ायरफ़ॉक्स 39 में डिफ़ॉल्ट मेनमेनू अभी भी कस्टम मेनू के शीर्ष पर दिखाई देता है। कस्टम मेनू प्रदर्शित करने के तुरंत बाद खारिज कर देता है।
— मैट
1
@ मैट मुझे फ़ायरफ़ॉक्स 58 के साथ एक ही समस्या थी। यह पोस्ट एक समाधान का वर्णन करता है, जो मेरे लिए काम करता है: stackoverflow.com/a/40545465/2922675 आप दस्तावेज़ के लिए इवेंट-प्रचार अक्षम करते हैं और विंडो ऑब्जेक्ट पर अपना संदर्भ-मेनू-हैंडलर पंजीकृत करते हैं । यहाँ एक समायोजित फ़िडेल है: jsfiddle.net/jjgkLe3g/1
— Nils-o-mat
27

कुछ अच्छे CSS और कुछ गैर-मानक HTML टैग्स का संयोजन, जिसमें कोई बाहरी लाइब्रेरी नहीं है, एक अच्छा परिणाम (JSFiddle) दे सकता है

एचटीएमएल

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

नोट: मेनू टैग मौजूद नहीं है, मैं इसे बना रहा हूं (आप कुछ भी उपयोग कर सकते हैं)

सीएसएस

#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 संक्रमण के साथ Google Chrome की तरह दिखता है। JS Fiddle

आओ हम ईज़ी शुरू करते हैं, क्योंकि हमारे पास इस पृष्ठ पर जेएस है, हम सीएसएस और लेआउट के बारे में चिंता कर सकते हैं। हम जिस लेआउट का उपयोग कर रहे हैं, वह <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[...]

अब हम स्वीकृत उत्तर से कोड जोड़ेंगे, और कर्सर का एक्स और वाई मान प्राप्त करेंगे। ऐसा करने के लिए, हम उपयोग करेंगे 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[...]

और वह यह है! बस में और बाहर फीका करने के लिए सीएसएस संक्रमण जोड़ें, और किया!

कोड स्निपेट दिखाएं

— स्टेफ़न स्टैनिसिक
स्रोत
इसने मुझे बहुत बड़ा सिर दर्द होने से बचाया! यदि ओपी पूरे वेबपेज पर उपयोग करने के लिए एक सरल तरीका ढूंढ रहा था और सिर्फ एक डिव नहीं, तो यह उत्तर स्वीकार किया जाना चाहिए :)
— वुडी
12

आप अपने बॉडी टैग में निम्न जोड़कर संदर्भ मेनू को अवरुद्ध करने का प्रयास कर सकते हैं:

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

ओपेरा 11.6 में परीक्षण और काम करता है, फ़ायरफ़ॉक्स 9.01, इंटरनेट एक्सप्लोरर 9 और क्रोम 17 आप जावास्क्रिप्ट राइट क्लिक मेनू पर एक काम कर रहे नमूने की जांच कर सकते हैं

— LabLogic
स्रोत
यह काम करता है, लेकिन आपके पृष्ठ पर डेमो मेनू वास्तव में छोटा और तंग है। अच्छा उदाहरण है, हालांकि।
— डेविड मिलर
2
यदि आप तीन-बटन वाले माउस का उपयोग कर रहे हैं तो यह काम करता है। Ctrl-click उपयोगकर्ता को उच्च और शुष्क छोड़ देता है। @ सिंगल्स के पास एक बेहतर सुझाव है, भले ही वह कल्पना से थोड़ा हटकर हो।
— AJFarkas
7

मुझे पता है कि यह पहले ही उत्तर दिया जा चुका है, लेकिन मैंने मूल संदर्भ मेनू को गायब करने के लिए दूसरा जवाब देने के लिए कुछ समय कुश्ती में बिताया है और यह दिखाता है कि उपयोगकर्ता ने कहां क्लिक किया।
एचटीएमएल

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

सीएसएस

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

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
स्रोत
कोड महान है, लेकिन कृपया ओपी समस्या वास्तव में क्या है, और यह इसे कैसे हल करता है, इसके बारे में कुछ विवरण शामिल करें।
— रोरी मैकक्रॉनन
मैं इस समाधान को पसंद करता हूं, हालांकि 39 फ़ायरफ़ॉक्स में मेनू ऊपर आने के बाद अपने आप ही खारिज हो जाता है।
— मैट
यह समाधान वास्तव में काम नहीं करता है यदि आप पृष्ठ को स्क्रॉल करने के लिए मजबूर करते हैं (कहते हैं कि आप <br> टैग का एक गुच्छा जोड़ते हैं) और कहीं न कहीं इसके निचले हिस्से में हैं।
— डैनियल
आपको इसके लिए पेजएक्स और पेजवाई के बजाय क्लाइंटएक्स और क्लाइंट का उपयोग करना चाहिए; इस महान जवाब की जाँच करें: stackoverflow.com/questions/9262741/…
— डैनियल
हां, डैनियलएम में राइट क्लिक मेनू के साथ समस्या है, इसलिए स्क्रॉल करते हुए पेजएक्स और पेजवाई के बजाय क्लाइंटएक्स और क्लाइंटवाई का उपयोग करके इसे दूर करें, मैंने कोड में बदलाव किए। मदद के लिए धन्यवाद ...
— अक्षय iv
5

शुद्ध जेएस और सीएसएस समाधान वास्तव में गतिशील राइट क्लिक के संदर्भ मेनू के लिए, तत्वों आईडी, लिंक आदि के लिए पूर्वनिर्धारित नामकरण सम्मेलनों के आधार पर 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>
स्निपेट का विस्तार करें

— यॉर्डन जॉर्जिएव
स्रोत
यह वह उत्तर है जो मैं उम्मीद कर रहा था, एक उदाहरण वास्तव में राइट क्लिक मेनू को संशोधित करता है
— जेसी रजा
हाँ, एक समान उदाहरण हो सकता है: codepen.io/yordangeorgiev/pen/GzWJzd और अंतिम उत्पाद: qto.fi/qto/view/concepts_doc (बस लॉगिन पर क्लिक करें ...)
— Yordan Georgiev
3

यहां पूर्ण वर्किंग कोड उदाहरण (JQuery और अन्य पुस्तकालयों के बिना) के साथ कस्टम संदर्भ मेनू बनाने का एक बहुत अच्छा ट्यूटोरियल है ।

आप GitHub पर उनका डेमो कोड भी पा सकते हैं ।

वे एक विस्तृत चरण-दर-चरण स्पष्टीकरण देते हैं जिसे आप अपने स्वयं के राइट-क्लिक संदर्भ मेनू (HTML, सीएसएस और जावास्क्रिप्ट कोड सहित) बनाने के लिए अनुसरण कर सकते हैं और इसे पूरा उदाहरण कोड देकर अंत में सारांशित कर सकते हैं।

आप आसानी से अनुसरण कर सकते हैं और इसे अपनी आवश्यकताओं के अनुसार ढाल सकते हैं। और 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>

एक कार्यकारी उदाहरण (कार्य सूची) कोडपेन पर पाया जा सकता है ।

— इच्छा का बल
स्रोत
एक संक्षिप्त सारांश समीक्षकों (मेरे जैसे) को आपके उत्तर की वैधता का न्याय करने में मदद करेगा, और कुछ पाठकों को उस लिंक का अनुसरण करने से बचा सकता है। बस एक या दो वाक्य ठीक होगा और बहुत ज्यादा काम नहीं होगा।
— इंगो करकट
@IngoKarkat आपकी सलाह के लिए धन्यवाद। मैंने कुछ स्पष्टीकरण जोड़ा। यह आपको उपयोगी लगने की आशा है। इसने मेरी बहुत मदद की।
— ForceOfWill 8
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घटना होती है, जो (आमतौर पर दाएं क्लिक पर) निकाल दी जाती है
— मेगावाच
1

एक सरल तरीका है कि आप इसे कर सकते हैं onContextMenu का उपयोग जावास्क्रिप्ट फ़ंक्शन को वापस करने के लिए किया जाता है:

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

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

और दर्ज करके return false;आप संदर्भ मेनू को रद्द कर देंगे।

यदि आप अभी भी संदर्भ मेनू प्रदर्शित करना चाहते हैं तो आप return false;लाइन को हटा सकते हैं ।

— EpicNinjaCheese
स्रोत
1

ओपेरा 12.17, फ़ायरफ़ॉक्स 30, इंटरनेट एक्सप्लोरर 9 और क्रोम 26.0.1410.64 में परीक्षण और काम करता है 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
— raphpell
स्रोत
1
जब संदर्भ मेनू प्रकट होता है तो वह जट एक चेतावनी नहीं दिखाएगा? मैं यह नहीं देखता कि यह इसे कैसे अनुकूलित करेगा।
— स्टीफन ओस्टरमिलर
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. अपने स्वयं के कस्टम डिव मेनू बनाएं और स्थिति निर्धारित करें: पूर्ण और प्रदर्शन: कोई भी मामले में नहीं।
  2. Oncontextmenu ईवेंट पर क्लिक किए जाने वाले पृष्ठ या तत्व में जोड़ें।
  3. डिफ़ॉल्ट ब्राउज़र कार्रवाई को गलत के साथ रद्द करें।

  4. उपयोगकर्ता अपने कार्यों को लागू करने के लिए जे.एस.

— क्रिस एनिटान
स्रोत
0

आपको यह याद रखना चाहिए कि क्या आप फ़ायरफ़ॉक्स केवल समाधान का उपयोग करना चाहते हैं, यदि आप इसे पूरे दस्तावेज़ में जोड़ना चाहते हैं तो आपको टैग contextmenu="mymenu"में <html>टैग नहीं जोड़ना चाहिए body।
आपको इस पर ध्यान देना चाहिए।

— WowOWwoW
स्रोत
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>

बेहतर दिखने, अधिक कुशल संदर्भों के लिए आप इस कोड को बदल सकते हैं और संशोधित कर सकते हैं। मौजूदा रेफ़मेन्यू को संशोधित करने के लिए, मुझे यकीन नहीं है कि यह कैसे करना है ... एक संगठित दृष्टिकोण के लिए इस फ़िडेल को देखें। इसके अलावा, मेरे संदर्भ में आइटम पर क्लिक करने का प्रयास करें। उन्हें आपको कुछ भयानक संदेशों के बारे में सचेत करना चाहिए। यदि वे काम नहीं करते हैं, तो कुछ और प्रयास करें ... जटिल।

— Cannicide
स्रोत
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 ब्राउज़रों को लक्षित करते हैं तो आपको इसे 'अटैचमेंट' के साथ पूरा करना चाहिए; मामला

— fedeghe
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.