จะเพิ่มเมนูคลิกขวาที่กำหนดเองในหน้าเว็บได้อย่างไร?

291

ฉันต้องการเพิ่มเมนูคลิกขวาที่กำหนดเองลงในเว็บแอปพลิเคชันของฉัน สามารถทำได้โดยไม่ต้องใช้ห้องสมุดที่สร้างไว้ล่วงหน้าหรือไม่? ถ้าเป็นเช่นนั้นจะแสดงเมนูคลิกขวาที่กำหนดเองง่ายๆซึ่งไม่ได้ใช้ไลบรารี JavaScript ของบุคคลที่สามได้อย่างไร

ฉันกำลังเล็งหาสิ่งที่ Google เอกสารทำ ช่วยให้ผู้ใช้คลิกขวาและแสดงเมนูของผู้ใช้

หมายเหตุ: ฉันต้องการเรียนรู้วิธีการสร้างของตัวเองเมื่อเทียบกับการใช้บางสิ่งบางอย่างที่คนทำไปแล้วตั้งแต่ส่วนใหญ่ห้องสมุดบุคคลที่สามนั้นเต็มไปด้วยคุณสมบัติในขณะที่ฉันต้องการเฉพาะคุณสมบัติที่ฉันต้องการเท่านั้น ผม.

javascript  contextmenu  right-click 
— ผู้ใช้ที่ลงทะเบียน
แหล่งที่มา
3
เพิ่งสะดุดเมื่อ: davidwalsh.name/html5-context-menuรัก HTML5
— TD_Nijboer
2
สิ่งนี้ไม่ซ้ำกันแน่นอน ในฐานะที่เป็นคำถามที่ต้องตอบโดยไม่ต้องห้องสมุดของบุคคลที่ 3 และคนอื่น ๆ ที่เป็นแนวโน้มที่จะใช้ Jquery (ผมอยากจะเขียนไดรฟ์บริบทของ Google เช่นเมนูบริบทภายใน UserScript ก)
— 2284570
เพียงแค่วันนี้ฉันได้พบอีกสองตัวอย่างที่ดี (ฉันคิดว่า) เกี่ยวกับเรื่องนี้: DEMO 1 // DEMO 2 (การสาธิตนี้ต้องการjQuery UI ) ฉันหวังว่าจะช่วยทุกคน bb
— Drako
2
เพียงแค่ต้องการชี้ให้เห็นว่าเมนูบริบท HTML5 ได้รับการสนับสนุนใน Firefox บางรุ่นเท่านั้นและเท่าที่ฉันสามารถบอกได้ว่าไม่มีสิ่งใดรองรับได้อีก Chrome ตั้งแต่เวอร์ชัน 61 ไม่รองรับ
— Dan Willett
2
สำหรับคนที่ใช้ตอบสนอง - พื้นเมืองเมนูซ้ำทั้งหมดของการทำงานที่มีอยู่ (คัดลอกเปิดในแท็บใหม่ค้นหาใน 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

— Radek Benkel
แหล่งที่มา
12
ทดสอบบน Opera 11.01, Firefox 3.6.13, Chrome 9, Safari 5 (ทั้ง 4 ผ่าน addEventListener) และ IE 8 (AttachEvent)
— Radek Benkel
54
คุณเพิ่งอธิบายวิธีปิดการใช้งานเมนูคลิกขวา วิธีการสร้างเมนูของเราเอง ??
— Shashwat
13
@Shashwat คุณรู้จักสถานที่ที่ผู้ใช้คลิกและคุณไม่มีเมนูดั้งเดิม สร้างที่เก็บในสถานที่นั้นและแสดงเมนูของคุณที่นั่น
— Radek Benkel
2
มันถูกต้อง: developer.mozilla.org/en-US/docs/DOM/element.addEventListener Document ก็เป็นองค์ประกอบเช่นกัน
— Radek Benkel
4
@shanehoban เมื่อคุณดูรหัสคุณจะเห็นบรรทัดe.preventDefault();นี้ นี่คือเหตุผลที่เมนูปกติไม่แสดง สิ่งที่คุณสามารถทำได้คือการสร้างตรรกะเงื่อนไขที่ตรวจสอบว่าถ้ากดปุ่มในขณะที่คลิกขวาแล้วไม่เรียกe.preventDefault()- คุณจะได้รับเมนูเบราว์เซอร์ปกติ
— Radek Benkel
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>
ขยายตัวอย่างข้อมูล

— Mohamed Iqzas
แหล่งที่มา
7
@Schism suffixed mouseY(event)และmouseX(event)ด้วยpxเพื่อให้การทำงานเป็นไปตามคาด: http://jsfiddle.net/a6w7n64o/
— zanetu
3
คุณกำลังอ้างอิงองค์ประกอบโดยใช้ ID ของtestแต่มีองค์ประกอบโดยใช้ ID testของไม่มี testองค์ประกอบเท่านั้นที่มีระดับของ
— The Duke Of Marshall שלום
1
@Adelphia - อะไรก็ตามที่ไม่ใช่ของพื้นเมืองและไม่ได้สร้างขึ้นมาเองเป็นของบุคคลที่สาม jQueryจริงๆแล้วไม่ใช่ทุกสิ่งที่เต็มไปด้วยสิ่งพิเศษ ไม่ถึงระดับที่มันจะช้าลงอะไร มันมีประโยชน์มากและjQueryคำตอบเดียวกันนี้สามารถแปลงเป็นJavaScriptคำสั่งมาตรฐานได้อย่างง่ายดาย อาจไม่ตรงกับ 100% กับคำขอในคำถามต้นฉบับ แต่ก็สอดคล้องกับมัน 95%
— ดยุคแห่งมาร์แชลล์
6
ใน firefox 39 บริบทเริ่มต้นยังคงปรากฏขึ้นที่ด้านบนของเมนูที่กำหนดเอง นอกจากนี้เมนูที่กำหนดเองจะยกเลิกทันทีหลังจากแสดง
— Matt
1
@Matt ฉันมีปัญหาเดียวกันกับ 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

ตามคำตอบที่นี่และที่อื่น ๆ กระแสฉันได้ทำรุ่นที่ดูเหมือนว่าหนึ่งใน Google Chrome กับการเปลี่ยนแปลง css3 JS Fiddle

ให้เริ่ม eazy เนื่องจากเรามี js ด้านบนในหน้านี้เราสามารถกังวลเกี่ยวกับ css และเลย์เอาต์ เลย์เอาต์ที่เราจะใช้เป็น<a>องค์ประกอบที่มี<img>องค์ประกอบหรือไอคอนตัวอักษรสุดยอด ( <i class="fa fa-flag"></i>) และ a <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 เพื่อจางหายเข้าและออก!

แสดงตัวอย่างโค้ด

— สเตฟาน Stanisic
แหล่งที่มา
สิ่งนี้ช่วยให้ฉันปวดหัวอย่างมาก! หาก OP กำลังมองหาวิธีง่ายๆในการใช้งานบนหน้าเว็บทั้งหมดและไม่ได้เป็นเพียง div นี้ควรจะเป็นคำตอบที่ได้รับการยอมรับ :)
— วู้ดดี้
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
2
ใช้งานได้หากคุณใช้เมาส์สามปุ่ม Ctrl-click ทำให้ผู้ใช้สูงและแห้ง @Singles มีข้อเสนอแนะที่ดีกว่าแม้ว่ามันจะปล่อยให้จินตนาการ
— AJFarkas
7

ฉันรู้ว่าคำตอบนี้ได้รับการตอบแล้ว แต่ฉันใช้เวลาในการต่อสู้กับคำตอบที่สองเพื่อให้เมนูบริบทดั้งเดิมหายไปและแสดงให้เห็นว่าผู้ใช้คลิกที่ใด
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

— Kristen Nielsen
แหล่งที่มา
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
แหล่งที่มา
โค้ดดีมาก แต่โปรดรวมคำอธิบายบางอย่างเกี่ยวกับปัญหาของ OP จริง ๆ และวิธีการนี้แก้ไขได้อย่างไร
— Rory McCrossan
ฉันชอบวิธีนี้ แต่ใน firefox 39 เมนูจะปิดตัวเองทันทีหลังจากที่มันเกิดขึ้น
— Matt
โซลูชันนี้ใช้งานไม่ได้จริงถ้าคุณบังคับให้หน้ามีการเลื่อน (กล่าวว่าคุณเพิ่มแท็ก <br> จำนวนมาก) และอยู่ในส่วนล่างของมัน
— DanielM
คุณควรใช้ clientX และ clientY แทน pageX และ pageY เพื่อให้มันใช้งานได้ ลองดูคำตอบที่ยอดเยี่ยมนี้: stackoverflow.com/questions/9262741/…
— DanielM
ใช่ DanielM มีปัญหากับเมนูคลิกขวาในขณะเลื่อนเพื่อให้สิ่งนี้เอาชนะโดยใช้ clientX และ clientY แทนที่จะเป็น pageX และ pageY ฉันได้ทำการเปลี่ยนแปลงโค้ด ขอบคุณสำหรับความช่วยเหลือ ...
— AkshayBandivadekar
5

โซลูชัน JS และ CSS ที่บริสุทธิ์สำหรับเมนูบริบทคลิกขวาแบบไดนามิกอย่างแท้จริงแม้ว่าจะอยู่บนพื้นฐานของหลักการตั้งชื่อที่กำหนดไว้ล่วงหน้าสำหรับรหัสองค์ประกอบลิงก์ ฯลฯ 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>
ขยายตัวอย่างข้อมูล

— Yordan Georgiev
แหล่งที่มา
นี่เป็นคำตอบที่ฉันคาดหวังมากขึ้นตัวอย่างจริง ๆ แล้วการปรับเปลี่ยนเมนูคลิกขวา
— Jesse Reza Khorasanee
yup, ตัวอย่างที่คล้ายกันอาจเป็น: 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
แหล่งที่มา
การสรุปสั้น ๆ จะช่วยให้ผู้ตรวจสอบ (เช่นฉัน) ตัดสินความถูกต้องของคำตอบของคุณและอาจช่วยให้ผู้อ่านบางคนไม่ติดตามลิงก์นั้น แค่หนึ่งหรือสองประโยคก็คงไม่เป็นไร
— Ingo Karkat
@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
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;บรรทัดได้

— EpicNinjaCheese
แหล่งที่มา
1

ทดสอบและใช้งานใน Opera 12.17, firefox 30, Internet Explorer 9 และ chrome 26.0.1410.64 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
— raphpell
แหล่งที่มา
1
จะไม่แสดงข้อความแจ้งเตือนเมื่อเมนูบริบทปรากฏขึ้นหรือไม่ ฉันไม่เห็นว่ามันจะปรับแต่งมันอย่างไร
— สตีเฟ่น 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;">

สิ่งที่ฉันทำที่นี่

  1. สร้างเมนู div ที่กำหนดเองของคุณและตั้งค่าตำแหน่ง: แน่นอนและแสดงผล: ไม่มีในกรณี
  2. เพิ่มไปยังหน้าหรือองค์ประกอบที่จะคลิกเหตุการณ์ oncontextmenu
  3. ยกเลิกการกระทำของเบราว์เซอร์เริ่มต้นด้วยการคืนเท็จ

  4. ผู้ใช้ js เพื่อเรียกใช้การกระทำของคุณเอง

— Chris Enitan
แหล่งที่มา
0

คุณควรจำไว้ว่าคุณต้องการใช้โซลูชัน Firefox เท่านั้นหากคุณต้องการเพิ่มลงในเอกสารทั้งหมดคุณควรเพิ่มลง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 ที่เก่ากว่าคุณควรดำเนินการต่อด้วย 'attachEvent; กรณี

— fedeghe
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.